Usage
To create a date picker, just call duDatepicker():
//Initializes a date picker for each input element with the class name '.duDatepicker-input'
duDatepicker();
//Initializes a date picker using the specified query selector
duDatepicker('#datepicker');
//Initializes a date picker using then matched input element
duDatepicker(document.querySelector('#datepicker'));
//Initializes a date picker for each mached input element
duDatepicker(document.querySelectorAll('.datepicker'));During initialization, you can also specify the min and max date.
duDatepicker('#datepicker', { minDate: 'today', maxDate: '10/30/2016' });If you specify the minDate and/or maxDate and place the data-mindate and/or data-maxdate on the input element, the value of the attribute will take precedence. For example if you specify minDate: 'today' in the config and placed a data-mindate="01/20/2018", the min date (for the input with data-mindate attribute) will be 01/20/2018.
You can set the default configurations globally by calling duDatepicker.defaults().
duDatepicker.defaults({ auto: true, theme: 'dark', format: 'mmmm d, yyyy' });Below are some built-in methods you can use (assuming the date picker is already initialized).
setValue - Sets the (selected) value of the date picker; follow format configuration
// default
duDatepicker('#datepicker', 'setValue', '08/01/2020');
// date range mode
duDatepicker('#daterange', 'setValue', '08/01/2020-08/05/2020');show - Programmatically shows the date picker
duDatepicker('#datepicker', 'show');hide - Programmatically hides the date picker
duDatepicker('#datepicker', 'hide');destroy - Removes the date picker plugin
duDatepicker('#datepicker', 'destroy');setMinDate - Sets the minDate configuration
duDatepicker('#datepicker', 'setMinDate', 'today');setMaxDate - Sets the maxDate configuration
duDatepicker('#datepicker', 'setMaxDate', 'today');setMinYear - Sets the minYear configuration
duDatepicker('#datepicker', 'setMinYear', 1990);setMaxYear - Sets the maxYear configuration
duDatepicker('#datepicker', 'setMaxYear', 2021);setPriorYears - Sets the priorYears configuration
duDatepicker('#datepicker', 'setPriorYears', 20);setLaterYears - Sets the laterYears configuration
duDatepicker('#datepicker', 'setLaterYears', 10);setTheme - Sets the theme configuration
duDatepicker('#datepicker', 'setTheme', 'teal');setDisabled - Sets the disabledDates configuration
duDatepicker('#datepicker', 'setDisabled', ['11/10/2021', '11/15/2021']);setDisabledDays - Sets the disabledDays configuration
duDatepicker('#datepicker', 'setDisabledDays', ['Sun', 'Sat']);setI18n - Sets the internationalization (i18n) configuration
// string
duDatepicker('#datepicker', 'setI18n', 'ru');
// object
duDatepicker('#datepicker', 'setI18n', duDatepicker.i18n.ru);
// custom
duDatepicker('#datepicker', 'setI18n', new duDatepicker.i18n.Locale(months, null, days, null, null, 1));You can also call multiple 'setter' methods at once by calling set:
duDatepicker('#datepicker', 'set', {
setTheme: 'blue',
setI18n: 'ru',
setDisabledDays: ['Sun', 'Sat']
});Object key is the name of the built-in method you want to call, and the value is the method parameter.
You can also specify the mininum and/or maximum date the user can select on othe date picker.
Just specify data-mindate and/or data-maxdate attributes on your input element. The acceptable values for these attributes are today or a specific date using this format: mm/dd/yyyy:
<!-- Dates enabled ranges from the current date onwards. -->
<input type="text" id="datepicker" data-mindate="today"/>
<!-- Dates enabled ranges from October 30, 2016 onwards. -->
<input type="text" id="datepicker" data-mindate="10/30/2016"/>
<!-- Dates enabled ranges from earlier dates until current date. -->
<input type="text" id="datepicker" data-maxdate="today"/>
<!-- Dates enabled ranges from previous dates of October 10, 2016 until October 10, 2016 -->
<input type="text" id="datepicker" data-maxdate="10/30/2016"/>You can also specify both the mininum and maximum date to create a specific date range acceptable:
<!-- Dates enabled ranges from January 1 to February 1, 2016 -->
<input type="text" id="datepicker" data-mindate="1/1/2016" data-maxdate="2/1/2016"/>Or thru js configuration
duDatepicker('#datepicker', { minDate: 'today', maxDate: '10/30/2016' });To disable specific date(s) or date range(s) use the disabledDates configuration:
// disables the specific dates on the picker
duDatepicker('#datepicker', { disabledDates: ['10/30/2016', '11/12/2016'] });
// disables dates from 10/01/2016 up to 10/15/2016 and 11/01/2016 up to 11/15/2016 on the picker
duDatepicker('#datepicker', { disabledDates: ['10/01/2016-10/15/2016', '11/01/2016-11/15/2016'] });
// mixed
duDatepicker('#datepicker', { disabledDates: ['10/30/2016', '11/01/2016-11/15/2016'] });Note: The date(s) should be written in the same format as the datepicker format (specified by the format configuration).
To disable specific days of the week use the disabledDays configuration:
// disables all mondays, tuesdays and wednesdays on the picker
duDatepicker('#datepicker', { disabledDays: ['Monday', 'Tue', 'We'] });To enable date range, set the range configuration to true. The following attributes will be added automatically to the input element: data-range-from and data-range-to.
duDatepicker('#daterange', { range: true });If you are using a custom format configuration using a dash (-), make sure to change the rangeDelim to avoid conflict upon formatting or parsing.
duDatepicker('#daterange', { format: 'yyyy-mm-dd', range: true, rangeDelim: '/' });By default, the value display for date range will be like this datefrom-dateto, and will display 1 date if dateFrom is equal to dateTo. To customize the value displayed in the input, use the events.onRangeFormat callback function.
duDatepicker('#daterange', {
format: 'mmmm d, yyyy', range: true,
events: {
onRangeFormat: function(from, to) {
var fromFormat = 'mmmm d, yyyy', toFormat = 'mmmm d, yyyy';
if (from.getMonth() === to.getMonth() && from.getFullYear() === to.getFullYear()) {
fromFormat = 'mmmm d'
toFormat = 'd, yyyy'
} else if (from.getFullYear() === to.getFullYear()) {
fromFormat = 'mmmm d'
toFormat = 'mmmm d, yyyy'
}
return from.getTime() === to.getTime() ?
this.formatDate(from, 'mmmm d, yyyy') :
[this.formatDate(from, fromFormat), this.formatDate(to, toFormat)].join('-');
}
}
})The above code will format the value display like this: August 15, 2020 (from & to is equal) or August 1-5, 2020 or August 28-September 5, 2020 or December 30, 2020-January 2, 2021.
Concatenate from and to with a delimiter (default is -) following the format configuration (default is mm/dd/yyyy)
<input type="text" id="daterange" value="08/01/2020-08/05/2020">Or via value configuration
duDatepicker('#daterange', { range: true, value: '08/01/2020-08/05/2020' })For situations where you need to use two input elements representing a date range (from & to), here's a workaround:
<input type="text" id="daterange" hidden>
<input type="text" id="range-from">
<input type="text" id="range-to">duDatepicker('#daterange', {
range: true, clearBtn: true, fromTarget: '#range-from', toTarget: '#range-to'
});The above script uses the configurations fromTarget and toTarget to use as the display input elements.
To enable multiple date selection, set the multiple configuration to true.
duDatepicker('#dateinput', { multiple: true })
// with default value
duDatepicker('#dateinput', { multiple: true, format: 'mm/dd/yyyy', value: ['08/01/2021','08/29/2021'] })
// setting the value
duDatepicker('#dateinput', 'setValue', ['08/01/2021','08/29/2021'])The date picker offers the following i18n presets:
| Language | Usage (object or string) |
|---|---|
| English (default) |
duDatepicker.i18n.en or 'en'
|
| Russian |
duDatepicker.i18n.ru or 'ru'
|
| Spanish |
duDatepicker.i18n.es or 'es'
|
| Turkish |
duDatepicker.i18n.tr or 'tr'
|
| Persian |
duDatepicker.i18n.fa or 'fa'
|
| French |
duDatepicker.i18n.fr or 'fr'
|
| German |
duDatepicker.i18n.de or 'de'
|
| Japanese |
duDatepicker.i18n.ja or 'ja'
|
| Portuguese |
duDatepicker.i18n.pt or 'pt'
|
| Vietnamese |
duDatepicker.i18n.vi or 'vi'
|
| Chinese |
duDatepicker.i18n.zh or 'zh'
|
Disclaimer: As of writing, preset list is based on the top 11 Languages used on the Internet
To use the above presets, you can access it via duDatepicker.i18n or use its code.
// sets the language to Russian
duDatepicker('#datepicker', { i18n: 'ru' });
duDatepicker('#datepicker', { i18n: duDatepicker.i18n.ru });You can also pass your own i18n object with the following format:
{
// required; array of month names
months: [],
// required; array of 3-character month names
shortMonths: [],
// required; array of day names
days: [],
// required; array of 3-character day names
shortDays: [],
// required; array of 2-character day names; this will used as week day label on the calendar
shorterDays: [],
// required; first day of the week; this gets overriden by `config.firstDay`
firstDay: 1,
// optional; dictionary for the button texts (if not specified English text will be used)
dict: {
// optional; OK button text
btnOk: '',
// optional; CANCEL button text
btnCancel: '',
// optional; CLEAR button text
btnClear: ''
}
}Or create it via duDatepicker.i18n.Locale()
// custom i18n config
var months = 'gennaio_febbraio_marzo_aprile_maggio_giugno_luglio_agosto_settembre_ottobre_novembre_dicembre'.split('_'),
days = 'domenica_lunedì_martedì_mercoledì_giovedì_venerdì_sabato'.split('_');
duDatepicker('#datepicker', {
i18n: new duDatepicker.i18n.Locale(months, null, days, null, null, 1)
});The event datechanged is fired after selection of date in the date picker.
You can use this to get the new date value:
duDatepicker('#datepicker', {format: 'mm-dd-yyy'})
// listen to event
document.querySelector('#datepicker').addEventListener('datechanged', function(e) {
// e.data contains the same properties as the 'data' parameter in the 'dateChanged' callback
console.log(e.data);
// this will log the input value
consoe.log(this.value);
})If outFormat configuration is specified, the date value will be different from the input value. Otherwise, the format configuration will be used to format the date.
Or you can use the events.dateChanged callback configuration to catch the date selection changes.
You can specify the color theme of the date picker by adding theme option upon initialization:
duDatepicker('#datepicker', {theme: 'green'});Or by adding a data-theme attribute on the input element:
<input type="text" id="datepicker" data-theme="dark"/>Note: If data-theme attribute is used, theme configuration will be overridden.
Predefined themes are: red, blue, green, purple, indigo, teal and dark.
If you don't specify the theme, the default theme (blue) will be used.
If you want to customize the theme, just use the src/themes/_format.scss file and change the following:
$theme: 'yellow'; // theme name
$headerBg: #F9A825; // header background color
$highlight: #FBC02D; // current date color, selected date(s) highlight color
$selectedHighlight: #F57F17; // selected highlight & buttons colorThen compile it using any sass compiler. Or if you are using this project, just run the npm scripts compile-theme-css and minify-theme-css (for a compressed version).
If you prefer editing a css file, you can edit the dist/duDatepicker-theme.css file.
Comment or remove the line shown below in the css file if you already have a link to the Roboto font.
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');