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'));

Using configuration

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.

Setting defaults

You can set the default configurations globally by calling duDatepicker.defaults().

duDatepicker.defaults({ auto: true, theme: 'dark', format: 'mmmm d, yyyy' });

Usable built-in methods

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));

Calling multiple methods

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.

Min and Max

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' });

Disabling specific dates and/or days

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'] });

Date Range

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.

Setting default value

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' })

Using two input elements

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.

Multiple Date Select

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'])

Internationalization

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 });

Custom i18n

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)
});

Event handling

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.

Themes

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.

Custom theme

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 color

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

Remember

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');