Choose Dates Effortlessly with the agjCalendar jQuery Plugin

agjCalendar (formly often called ctcCalendar) is a full-featured jQuery date picker plugin that transforms enter fields or choose dropdowns right into a date selector interface for simple, intuitive number of dates. 

This plugin helps three show modes: inline, modal, and fullscreen, which lets you seamlessly combine the date picker based on your net design necessities.

It additionally comes with a variety specification function which allow customers to conveniently choose begin and finish dates on the calendar, very best for reserving methods or occasion schedulers.

Tips on how to use it:

1. Embrace the most recent jQuery library and the agjCalendar plugin’s recordsdata on the web page.

<!-- With Themes -->
<hyperlink rel="stylesheet" href="/path/to/jquery.agjCalendar.min.css" />

<!-- With No Themes -->
<hyperlink rel="stylesheet" href="/path/to/jquery.agjCalendar.min.no-themes.css" />

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- With All Translations -->
<script src="/path/to/jquery.agjCalendar.min.js"></script>

<!-- English Solely -->
<script src="/path/to/jquery.agjCalendar.min.english-only.js"></script>

2. Connect the date picker plugin to your textual content subject.

<enter kind="textual content" worth="06/26/2023" id="text-example" />
<!-- Non-compulsory -->
<img src="calendar-icon.gif" alt="Calendar Icon" id="trigger-button" />

$.agjCalendar({
  inputType: "textual content",
  dateSelector: "#text-example",
  expanderSelector: "#trigger-button"
});

3. Or choose parts.

<choose id="month">
  <choice worth="2022-09">September 2022</choice>
  <choice worth="2022-10">October 2022</choice>
  <choice worth="2022-11">November 2022</choice>
  <choice worth="2022-12">December 2022</choice>
  <choice worth="2023-01">January 2023</choice>
  <choice worth="2023-02">February 2023</choice>
  <choice worth="2023-03">March 2023</choice>
  <choice worth="2023-04">April 2023</choice>
  <choice worth="2023-05">Might 2023</choice>
  <choice worth="2023-06">June 2023</choice>
  <choice worth="2023-07">July 2023</choice>
  <choice worth="2023-08">August 2023</choice>
  <choice worth="2023-09">September 2023</choice>
  <choice worth="2023-10">October 2023</choice>
  <choice worth="2023-11">November 2023</choice>
  <choice worth="2023-12">December 2023</choice>
</choose>
<choose id="day">
  <choice worth="01">1</choice>
  <choice worth="02">2</choice>
  <choice worth="03">3</choice>
  <choice worth="04">4</choice>
  <choice worth="05">5</choice>
  <choice worth="06">6</choice>
  <choice worth="07">7</choice>
  <choice worth="08">8</choice>
  <choice worth="09">9</choice>
  <choice worth="10">10</choice>
  <choice worth="11">11</choice>
  <choice worth="12">12</choice>
  <choice worth="13">13</choice>
  <choice worth="14">14</choice>
  <choice worth="15">15</choice>
  <choice worth="16">16</choice>
  <choice worth="17">17</choice>
  <choice worth="18">18</choice>
  <choice worth="19">19</choice>
  <choice worth="20">20</choice>
  <choice worth="21">21</choice>
  <choice worth="22">22</choice>
  <choice worth="23">23</choice>
  <choice worth="24">24</choice>
  <choice worth="25">25</choice>
  <choice worth="26">26</choice>
  <choice worth="27">27</choice>
  <choice worth="28">28</choice>
  <choice worth="29">29</choice>
  <choice worth="30">30</choice>
  <choice worth="31">31</choice>
</choose>
<!-- Non-compulsory -->
<img src="calendar-icon.gif" alt="Calendar Icon" id="trigger-button" />

$.agjCalendar({
  inputType: "dropdown",
  monthSelector: "#month",
  daySelector: "#day",
  expanderSelector: "#trigger-button"
});

3. Create a easy date vary picker.

// textual content subject
$.agjCalendar({
  inputType: "textual content",
  dateSelector: "#begin-date",
  expanderSelector: "#begin-calendar",
  endDateSelector: "#end-date",
  endExpanderSelector: "#end-calendar"
});

// choose dropdown
$.agjCalendar({
  calendarCount: 3,
  inputType: "dropdown",
  monthSelector: "#begin-month",
  daySelector: "#begin-day",
  expanderSelector: "#begin-calendar",
  allowRange: true,
  endMonthSelector: "#end-month",
  endDaySelector: "#end-day",
  endExpanderSelector: "#end-calendar"
});

4. Full plugin choices to customise the date picker.

$.agjCalendar({
  allowBlankDates:            false,
  allowRange:                 false,
  autoBlur:                   null,
  autoSetEndDate:             'dates', // 'blanks', 'dates', 'at all times', 'by no means'
  calendarCount:              1, // 1, 2, 3
  calendarDisplay:            'inline', // 'inline', 'modal', 'full'
  calendarSize:               'small', // 'small', 'medium', 'giant'
  dateFormat:                 'm/d/Y',
  dateFormatDate:             'j',
  dateFormatDateTooltip:      '', // if English 'F j, Y' in any other case 'j F Y'
  dateFormatDayInput:         'j',
  dateFormatDayOfWeekTooltip: 'l',
  dateFormatMonthDropdown:    'M Y',
  dateFormatMonthInput:       'M Y',
  dateFormatMonthLabel:       'F Y',
  dateSelector:               null,
  dayNameEllipsis:            true,
  dayNameFormat:              'quick', // 'quick', 'abbreviated', 'full'
  daySelector:                null,
  defaultDate:                new Date(),
  defaultEndDate:             null,
  defaultRange:               -1,
  endDateSelector:            null,
  endDaySelector:             null,
  endExpanderSelector:        null,
  endMonthSelector:           null,
  excludeDates:               [],
  expanderSelector:           null,
  forceMaxZIndex:             false,
  inputType:                  'textual content', // or 'dropdown'
  language:                   'en',
  maximumDate:                maximumDateDefaultValue,
  maximumRange:               -1,
  minimumDate:                new Date(),
  minimumRange:               -1,
  monthSelector:              null,
  overwriteDayOptions:        true,
  overwriteMonthOptions:      true,
  startWeekOnMonday:          false,
  theme:                      null, // 'crimson', 'orange', 'yellow', 'inexperienced', 'cyan', 'blue', 'purple', 'pink', 'custom-*'
  translations:               {}
});

5. Add extra translations.

$.agjCalendar({
  translations:{
    days: {
      full: {
        0: 'Sunday',
        1: 'Monday',
        2: 'Tuesday',
        3: 'Wednesday',
        4: 'Thursday',
        5: 'Friday',
        6: 'Saturday'
      },
      abbreviated: {
        0: 'Solar',
        1: 'Mon',
        2: 'Tue',
        3: 'Wed',
        4: 'Thu',
        5: 'Fri',
        6: 'Sat'
      },
      quick: {
        0: 'S',
        1: 'M',
        2: 'T',
        3: 'W',
        4: 'T',
        5: 'F',
        6: 'S'
      }
    },
    months: {
      full: {
        0:  'January',
        1:  'February',
        2:  'March',
        3:  'April',
        4:  'Might',
        5:  'June',
        6:  'July',
        7:  'August',
        8:  'September',
        9:  'October',
        10: 'November',
        11: 'December'
      },
      abbreviated: {
        0:  'Jan',
        1:  'Feb',
        2:  'Mar',
        3:  'Apr',
        4:  'Might',
        5:  'Jun',
        6:  'Jul',
        7:  'Aug',
        8:  'Sep',
        9:  'Oct',
        10: 'Nov',
        11: 'Dec'
      }
    },
    ordinalSuffixes: {
      1:  'st',
      2:  'nd',
      3:  'rd',
      4:  'th',
      5:  'th',
      6:  'th',
      7:  'th',
      8:  'th',
      9:  'th',
      10: 'th',
      11: 'th',
      12: 'th',
      13: 'th',
      14: 'th',
      15: 'th',
      16: 'th',
      17: 'th',
      18: 'th',
      19: 'th',
      20: 'th',
      21: 'st',
      22: 'nd',
      23: 'rd',
      24: 'th',
      25: 'th',
      26: 'th',
      27: 'th',
      28: 'th',
      29: 'th',
      30: 'th',
      31: 'st'
    },
    meridiemIndicators: {
      lowercase: {
        0: 'am',
        1: 'pm'
      },
      uppercase: {
        0: 'AM',
        1: 'PM'
      }
    },
    hideCalendar:    'Cover Calendar',
    nextMonth:       'Subsequent Month',
    previousMonth:   'Earlier Month',
    poweredByBefore: 'Powered by',
    poweredByAfter:  '',
    blankDateText:   'Choose a Date'
  },
});

6. Execute a callback operate after init.

var integration;
$('#text-input').agjCalendar({
  dateFormat: 'Y-m-d'
}, operate(returnValue) {
  integration = returnValue;
});
if (integration !== -1) {
  alert('The mixing was a hit!');
} else {
  alert('The mixing failed; verify your Javascript console for particulars.');
}

7. API strategies.

// add an everyday expression sample to the plugin's textual content checks
$.agjCalendar.addRegexTextPattern(regex);

// convert date to string
$.agjCalendar.dateToString(new Date(), 'j F Y');

// convert string thus far
$.agjCalendar.stringToDate('1 January 2000', 'j F Y');

// deactive
$.agjCalendar.deactivate();

// disable
$.agjCalendar.disable(place);

// allow/disable emoji
$.agjCalendar.enableEmojiSupport();
$.agjCalendar.disableEmojiSupport();

// get contains translations
$.agjCalendar.getIncludedTranslations('fr');

// verify if is energetic
$.agjCalendar.isActive();

Changelog:

v1.2.2 (2024-09-03)

v1.2.1 (2024-06-03)

• Fastened bug with the U date format character to take away timezone errors
• Dropped assist for the B date format character (Swatch Web Time)

v1.2.0 (2024-05-31)

• Added extra translations
• Added assist for {custom} translations
• Added the translations choice
• Added the jquery.agjCalendar.min.english-only.js file to supply a smaller footprint to integrations utilizing completely English as a substitute of jquery.agjCalendar.min.js which now contains all twenty included languages
• Now you can customise far more of the formatting of your integrations utilizing the dateFormat, dateFormatDate, dateFormatDateTooltip, dateFormatDayInput, dateFormatDayOfWeekTooltip, dateFormatMonthDropdown, dateFormatMonthInput and dateFormatMonthLabel choices
• Added ‘use strict’; to Javascript supply
• Added second elective callback parameter to $.fn.agjCalendar
• Added $.agjCalendar.addRegexTextPattern(), $.agjCalendar.dateToString(), $.agjCalendar.disable(), $.agjCalendar.disableEmojiSupport(), $.agjCalendar.enableEmojiSupport(), $.agjCalendar.getIncludedTranslations() and $.agjCalendar.stringToDate() capabilities
• Bugfixes

v1.0.3 (2023-08-06)

• Fastened a bug the place the defaultDate or defaultEndDate choice being set to “clean” would sometimes throw a Javascript error

v1.0.2 (2023-08-06)

• Added the defaultEndDate choice
• Up to date the getDaysInMonth() operate to make use of base 0 for the months somewhat than base 1
• Up to date the monthNameToNumber() operate with a minor optimization
• Up to date calendar-icon.gif to be retina show pleasant on the documentation web site
• Fastened bugs

v1.0.1 (2023-07-31)

v1.0.0 (2023-07-24)

• Renamed agjCalendar to agjCalendar
• Added assist for npm, Yarn and Bower dependency managers
• Added .github folder for prolonged GitHub assist
• Added ESLint assist for Javascript
• Added Stylelint assist for CSS
• Added gulp.js assist to minify Javascript and CSS
• Eliminated minifer.bat script
• Modified the expanderSelector and endExpanderSelector choices to be elective
• Added Date object assist to the defaultDate, maximumDate and minimumDate choices
• Eliminated unused get_month_text() and get_day_text() capabilities
• Modified keyboard bindings to make use of occasion.key somewhat than occasion.keyCode
• Added $.fn.agjCalendar() assist
• Fastened a bug inflicting a Javascript error when an invalid date was pre-entered right into a textual content enter
• Fastened a bug inflicting a Javascript error when utilizing a <choose> aspect containing no <choice> parts
• Fastened a bug inflicting the calendar to prematurely cover if an ID selector wasn’t used
• Refactored many areas of the codebase

This superior jQuery plugin is developed by andrewgjohnson. For extra Superior Usages, please verify the demo web page or go to the official web site.