A simplified jQuery date and time picker

This project is maintained by sunalive

Why another Date picker?

There are numerous date, time pickers out there. However, each of those lack in one way or another. If they are feature-rich, they are bulky. If they are light-weight, they lack features. Some others which looked good are either abandoned or use jQuery UI! Many lacked semantic declaration (declaring options as element attributes say, data- attribute) which is a deal breaker for me as most of my code is dynamically generated. Some good looking ones were so buggy that I wasted more time trying to debug than making use of it. I felt that things could be written simple and still be feature-rich. Thus was born this project.


jSunPicker has the following features:



Basic usage with default options


Specifying options in Javascript

 $('selector').jSunPicker({startDay:1, pickerType:'date', displayFormat:'m/d/Y'});

Semantic declaration (as selector's data- attributes)

HTML: Declare the options breaking with hiphens at camel-case characters like below. jQuery converts them to camel-case.

<input id='datepicker' data-start-day = '1' data-picker-type = 'date' />

JQuery: Basic markup. Any undeclared option will be substituted by the default values.


Date Format variables

This plugin uses specific variables to standardize input and output formats for date and time. This could be a small inconvenience for developers who are used to PHP date formats but keeping this way saves a lot of unnecessary code just to manage format conversions which in my opinion, is too much flab that the usage levels do not justify the efforts. You'll get used to this by time and may even find this more convenient as you do.

The following denotes the date and time notations for this script. Mix with the separators for your desired format.

Format example

Plugin Options

Option Description Example Default value
language Should denote the language used. Placeholder for future development, not used as of now language:'en-US' en-US
daysTitle Days of the week (long text) daysTitle:['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] English days (Sunday to Saturday)
monthsTitle Months of the year (long text) monthsTitle:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] English months (January to December)
dayShort Number of characters from the start of daysTitle for short day names dayShort:2 2
monthShort Number of characters from the start of monthsTitle for short month names monthShort:3 3
showIcon path/to/calendar/icon, to trigger picker on clicking the icon instead of input element showIcon:'path/to/icon/' null
inline jQuery selector for the inline container, be sure to give a unique one. This will make it an inline calendar instead of popup calendar inline:'#element-id' null
startDay Start day of the week, Sunday = 1, Saturday = 7 startDay:1 1
pickerType Denotes the picker type. Available types: datetime (date + month + year + time), date, month, year, time. Set the appropriate formats pickerType:'date' datetime
displayFormat Date format for visual display. Spaces have to be explicitly defined too. See the formats section above displayFormat:'W, T d, Y H:N:S A' M/D/Y H:N:S
outputFormat Date format for form submit. See the formats section above outputFormat:'D-M-Y' U
minDate Minimum available date for selection. All dates before this date will be disabled. '[date-string]' in any text format except date first i.e. not like d-m-y or d/mmm/yyyy minDate:'09/25/2014 05:12:23 PM' null
maxDate Maximum available date for selection. All dates after this date will be disabled. Formats same as minDate maxDate:'2014-09-25 18:34:59' null
minTime Minimum available time for selection. All times before this time will be invalid. [time] or [date-time] in any text format minTime:'4:23:45 AM' null
maxTime Maximum available time for selection. All times after this time will be invalid. Format same as minTime maxTime:'06/24/2015 4:23:45 PM' null
disabledDays Days disabled from selection. Similar to startDay (Sun = 1, Sat = 7) separated by commas disabledDays:'1,7' null
disabledDates Dates disabled from selection. Individual dates or date ranges separated by commas. Range dates separated by hyphens disabledDates:'2016/03/05,2016/03/10-2016/03/15' null
initialDate Initial selected date. This date will be selected in the element and the picker by default initialDate:'2016/3/14 12:21:23 PM' null
onShow Trigger a JS function when picker shows up onShow:$.noop $.noop
onClose Trigger a JS function when picker is closed (destroyed) onClose:$.noop $.noop
onSelect Trigger a JS function when a value is selected in the picker onSelect:$.noop $.noop

Sample & Demo

A demo page with usage examples is available here.


Heavily inspired by Will_pickdate() by TazSingh (@tazsingh). Thanks TazSingh. I have been using that for more than a year but it has some serious bugs with min-max date restrictions. This has not been updated for a while and I also thought that the code could be lot simpler. So I borrowed the visual and navigation design (it was so beautiful) from that project and wrote my plugin from scratch.

Authors and Contributors

Ravi Iyer (@sunalive)


MIT License. Do whatever you wish.

Support or Contact

Submit a bug if you find any. Fork or create a pull request if you wish to contribute. Source code is heavily commented for your understanding.