A simplified jQuery date and time picker
This project is maintained by sunalive
This page shows usage examples, code samples and demo of the project. This page will be updated with latest changes in the project code.
Pop-up date picker with default options
<input class="datepicker" name="mydate" placeholder="Click to open picker" />
Place an inline date picker and tie it to a field. You can make this field invisible if you just want your users to just interact with the visual calendar.
<input class="datepicker" data-inline='#inlinepicker' id="inlinedate" name="inlinedate" placeholder="Select date from picker" /> <div id='inlinepicker'>Pops Picker</div>
Day and Month names in French below. Note that the title names have to be enclosed in double-quotes. Accented characters are just fine. Don't forget to set the appropriate format for displayDate.
<input class="datepicker" id="localdate" name="localdate" placeholder="Click to open picker" data-days-title='["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"]' data-months-title='["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]' data-month-short="4" />
Initialize the date picker by clicking the icon instead of the field.
<input class="datepicker" name="icondate" data-show-icon="images/calendar.ico" placeholder="Click the icon" />
Start the week on a different day than Sunday.
<input class="datepicker" id="startday" name="startday" data-start-day="3" placeholder="I start on Tuesday" />
Set a user-friendly format for displaying the date and a different format for the date submitted (output).
<input class="datepicker" id="dispdate" name="dispdate" data-display-format="T D, Y" data-output-format="Y-M-D" placeholder="I show and submit differently" />
Date submitted:
Set the picker type to let your users choose date-time, date, month or year. Don't forget to set the appropriate formats.
<input class="datepicker" id="pickertype" name="pickertype" data-picker-type="month" data-display-format="M" placeholder="I select Month" />
Disable some days of the week from being selected.
<input class="datepicker" id="disabledays" name="disabledays" data-disabled-days="1,7" placeholder="Disabled weekends" />
Disable specific dates or date ranges from being selected. Dates Apr 5, 2016, dates between Apr 10, 2016 and Apr 15, 2016, dates between Apr 25, 2016 and Apr 27, 2016 are disabled here.
<input class="datepicker" id="disabledates" name="disabledates" data-disabled-dates="2016/04/05,2016/04/10-2016/04/15,2016/04/25-2016/04/27" placeholder="Disabled dates" />
Restrict date selection before a particular date. Dates before Apr 10, 2016 are disabled here.
<input class="datepicker" id="mindate" name="mindate" data-display-format="D-t-Y" data-min-date="2016/04/10" placeholder="Disabled before Apr 10, 2016" />
Restrict date selection after a particular date. Dates after Apr 25, 2016 are disabled here.
<input class="datepicker" id="maxdate" name="maxdate" data-display-format="D-t-Y" data-max-date="2016/04/25" placeholder="Disabled after Apr 25, 2016" />
Combine minimum and maximum restrictions to set a selectable date range. Dates before Apr 10, 2016 and after Apr 25, 2016 are disabled here.
<input class="datepicker" id="rangedate" name="rangedate" data-display-format="D-t-Y" data-min-date="2016/04/10" data-max-date="2016/04/25" placeholder="Selectable date range" />
Restrict date selection before a particular time. Times before 05:00 AM are disabled here.
<input class="datepicker" id="mintime" name="mintime" data-picker-type="time" data-min-time="05:00 AM" placeholder="Disabled before 05:00 AM" />
Restrict date selection after a particular time. Times after 05:00 PM are disabled here.
<input class="datepicker" id="maxtime" name="maxtime" data-picker-type="time" data-max-time="05:00 PM" placeholder="Disabled after 05:00 PM" />
Combine minimum and maximum restrictions to set a selectable time range. Times before 05:00 AM and after 05:00 PM are disabled here.
<input class="datepicker" id="rangetime" name="rangetime" data-picker-type="time" data-min-time="05:00 AM" data-max-time="05:00 PM" placeholder="Selectable date range" />
Set an initial date for the date picker to select while it loads.
<input class="datepicker" id="initdate" name="initdate" data-initial-date="2016/04/14" data-display-format="D-t-Y" />