jQuery Plugins › jQuery Time & Clock Plugins › jQuery agjCalendar

Pick Dates Effortlessly with the agjCalendar jQuery Plugin

File Size: 4.63 MB
Views Total: 1342
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#Date Picker#Calendar#date range
Pick Dates Effortlessly with the agjCalendar jQuery Plugin

agjCalendar (formly known as ctcCalendar) is a full-featured jQuery date picker plugin that transforms input fields or select dropdowns into a date selector interface for easy, intuitive selection of dates. 

This plugin supports three display modes: inline, modal, and fullscreen, which allows you to seamlessly integrate the date picker according to your web design requirements.

It also comes with a range specification feature which enable users to conveniently pick start and end dates on the calendar, ideal for booking systems or event schedulers.

How to use it:

1. Include the latest jQuery library and the agjCalendar plugin's files on the page.

<link rel="stylesheet" href="/path/to/jquery.agjCalendar.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.agjCalendar.min.js"></script>

2. Attach the date picker plugin to your text field.

<input type="text" value="06/26/2023" id="text-example" />
<!-- Optional -->
<img src="calendar-icon.gif" alt="Calendar Icon" id="trigger-button" />

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

3. Or select elements.

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

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

3. Create a simple date range picker.

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

// select 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 options to customize the date picker.

$.agjCalendar({
  inputType: "text", // "text" or "dropdown"
  monthSelector: "",
  daySelector: "",
  dateSelector: "",
  dayNameFormat: "short", // "short", "medium", or "full"
  endDateSelector: "",
  expanderSelector: "",
  calendarCount: 1,
  overwriteMonthOptions: true,
  overwriteDayOptions: true,
  minimumDate: new Date(), // e.g "2010-01-01"
  maximumDate: new Date(),
  defaultDate: minimumDate, // today's date
  defaultEndDate: '', // today's date plus the defaultRange
  allowRange: false,
  endMonthSelector: "",
  endDaySelector: "",
  endExpanderSelector: "",
  minimumRange: null,
  maximumRange: null,
  defaultRange: null, // 0 if the minimumDate and maximumDate options are set to the same date otherwise 1
  autoSetEndDate: false,
  allowBlankDates: true,
  // dateFormat.1 = MM/DD/YYYY, e.g. "01/02/2023"
  // dateFormat.2 = MMM D, YYYY, e.g. "Jan 2, 2023"
  // dateFormat.3 = DD/MM/YYYY, e.g. "02/01/2023"
  // dateFormat.4 = YYYY-MM-DD, e.g. "2023-01-02"
  dateFormat: 1,
  calendarDisplay: "inline", // "inline", "modal" or "full"
  startWeekOnMonday: false,
});

Changelog:

v1.0.3 (2023-08-06)

  • Fixed a bug where the defaultDate or defaultEndDate option being set to "blank" would occasionally throw a Javascript error

v1.0.2 (2023-08-06)

  • Added the defaultEndDate option
  • Updated the getDaysInMonth() function to use base 0 for the months rather than base 1
  • Updated the monthNameToNumber() function with a minor optimization
  • Updated calendar-icon.gif to be retina display friendly on the documentation website
  • Fixed bugs

v1.0.1 (2023-07-31)

  • Update

v1.0.0 (2023-07-24)

  • Renamed agjCalendar to agjCalendar
  • Added support for npm, Yarn and Bower dependency managers
  • Added .github folder for extended GitHub support
  • Added ESLint support for Javascript
  • Added Stylelint support for CSS
  • Added gulp.js support to minify Javascript and CSS
  • Removed minifer.bat script
  • Changed the expanderSelector and endExpanderSelector options to be optional
  • Added Date object support to the defaultDate, maximumDate and minimumDate options
  • Removed unused get_month_text() and get_day_text() functions
  • Changed keyboard bindings to use event.key rather than event.keyCode
  • Added $.fn.agjCalendar() support
  • Fixed a bug causing a Javascript error when an invalid date was pre-entered into a text input
  • Fixed a bug causing a Javascript error when using a <select> element containing no <option> elements
  • Fixed a bug causing the calendar to prematurely hide if an ID selector wasn’t used
  • Refactored many areas of the codebase

This awesome jQuery plugin is developed by andrewgjohnson. For more Advanced Usages, please check the demo page or visit the official website.