Datepicker helps to pick date easily for any input field. There are lot’s of free jquery datepicker plugins. Here i am going to share one of Full-featured DatePicker jQuery Plugin which you can use in any input field to pick dates or date range quickly.
Features
- Supports more configurable options.
- Supports more methods
- Supports more events
- Supports datetime mode
- Supports range date and range datetime mode
- Supports internationalization
- Cross-browser support
Libraries
--CSS--> <link rel="stylesheet" href="/assets/css/iconfont.css"> <link rel="stylesheet" href="/css/jquery.datepicker.min.css"> --JS--> > > // there is no need to import the next line of code when current language is 'en-US' > |
Methods
$().datepicker(methodName, argument1, argument2, ..., argumentN);
setDate(date)
Set the current date with a new date, parameter date type is String or Date .$().datepicker('setDate', '2016-02-09');
$().datepicker('setDate', new Date(2016, 1, 9));
getDate()
Get the current date.$().datepicker('getDate');
clear()
Clear the picker date (when date is cleared, the current date is displayed by default).$().datepicker('clear');
show()
Show the picker panel.$().datepicker('show');
hide()
hide the picker panel.$().datepicker('hide');
disable(value)
disable or enable the picker, if parameter value is true that can disable the picker, otherwise can enable the picker.// disable the picker
$().datepicker('disable', true);
// enable the picker
$().datepicker('disable', false);
destroy()
Destroy the picker and remove the instance from target element.$().datepicker('destroy');
Events
$().on(eventName, function (e, arguments) {
// todo
});
pick.datepicker
This event fires when date is changed.- event ( Type: Object )
- newDate ( Type: String )
- oldDate ( Type: String )
$().on('pick.datepicker', function (event) {
console.log('newDate: ' + event.newDate);
console.log('oldDate: ' + event.oldDate);
});
show.datepicker
This event fires when picker is show.$().on('show.datepicker', function (e) {
// todo
});
hide.datepicker
This event fires when picker is hide.$().on('hide.datepicker', function (e) {
// todo
});
Callbacks
$().datepicker({
CallbackName: function () {
// todo
}
});
onChange
A shortcut of the “pick.datepicker” event, this callback called when picker value is changed.$().datepicker({
onChange: function (events) {
console.log('newDate: ' + event.newDate);
console.log('oldDate: ' + event.oldDate);
}
});
onShow
A shortcut of the “show.datepicker” event, this callback called when picker is show.$().datepicker({
onShow: function () {
// todo
}
});
onHide
A shortcut of the “hide.datepicker” event, this callback called when picker is hide.$().datepicker({
onHide: function () {
// todo
}
});
Locale
I18n config, default language is en-US
Usage
Here are the list of attributes you can use in datapicker javascript function.
| Name | Type | Default value | Optional value | Description |
|---|---|---|---|---|
| type | String | ‘date’ | year/month/date/datetime/datetime-range/date-range | type of the picker |
| readonly | Boolean | false | false/ true | whether DatePicker is read only |
| disabled | Boolean | false | false/ true | whether DatePicker is disabled |
| format | String | ‘yyyy-MM-dd’ | year->yyyy, month->MM, day->dd, hour->HH, minute->mm, second->ss | format of the picker |
| placeholder | String | ‘Please pick a day’ | — | init input element’s placeholder |
| align | String | ‘left’ | ‘left’/’center’/’right’ | the pick panel’s alignment |
| weekStart | Number | 0 | — | Start of the week |
| startDate | Date | null | — | If the start date exists, the date before the start date is disabled |
| endDate | Date | null | — | If the end date exists, the date after the end date is disabled |
| lang | String | ‘en-US’ | ‘en-US’/’zh-CN’/’vi’ | language of the datepicker |
| rangeSeparator | String | ‘-‘ | — | if type is ‘date-range’ or ‘datetime-range’, use rangeSeparator to separate the date |
| defaultValue | String/Date | ” | — | default date, if picker type is date-range or datetime-range, picker’s type must be String |
| zIndex | Number | 2008 | — | The CSS style z-index for the picker. |
See live demo and download source code.
This awesome script developed by gregzhang616, Visit their official github repository for more information and follow for future updates.
