jSunPicker 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.

Features

jSunPicker has the following features:

Light-weight - 12kb minified, 4kb gzipped
Supports datetime, date, time, month and year picker
Separate date and time formats for display and submit
Dedicated ♥ button for current date and time
Semantic declaration - declare your options as javascript or as data- attributes or leave them at defaults
Supports all output formats and most input formats (to manually enter the date in the input element)
Date range restrictions - min-date, max-date and disable selected-dates (or ranges)
Time restrictions - min-time, max-time
Days restrictions - disable selective days (say, Sat & Sun)
Standardized date input formats for options
Customizable Title strings (multi-language support)
Customizable Start day (Monday can be your first day of the week)
Inline calendar or trigger from text field or custom icon
9 gorgeous themes

Dependencies

jQuery 1.8+
jQuery.mousewheel for time scroll.

Usage

Basic usage with default options

 $('selector').jSunPicker();

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.

$('#datepicker').jSunPicker();

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.

y - two digit year (85)
Y - four digit year (1985)
m - month number without leading zero (2 for February)
M - month number with leading zero (02 for February)
t - month short text (Jan for January, as defined by monthShort)
T - month long text (January)
d - date number without leading zero (3 for 3rd)
D - date number with leading zero (03 for 3rd)
h - hours without leading zero (2 for 2 AM, 14 for 2 PM)
H - hours with leading zero (02 for 2 AM, 14 for 2 PM)
a - meridian (am/pm) : Not defining this will render 24 hour time
A - meridian (AM/PM) : Not defining this will render 24 hour time
n - minutes without leading zero (2 for 2 minutes)
N - minutes with leading zero (02 for 2 minutes)
s - seconds without leading zero (same as minutes)
S - seconds with leading zero (same as minutes)
w - day of the week short text (Su for Sunday, as defined by dayShort)
W - day of the week long text (Sunday)
U - unix time (UTC time)
X - military time (Time as 4 digit integers HHMM without colons)

Format example

'W, T d, Y H:N:S A' translates to: Sunday, February 1, 1903 11:09:59 PM
'd-m-Y' translates to: 9-2-1975

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.

Inspiration

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)

License

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.