Options

Calling duDatepicker() will initialize the date picker. If selectors is not provided, the plugin will look for input elements with the class duDatepicker-input.

duDatepicker(
  [selectors],  // optional; input element selectors; input element; Array or NodeList of input elements
  [config],     // optional; date picker configurations
  [...params]   // optional; this is used when calling date picker built-in methods which requires parameters like 'setValue'
)

Configurations

{
  // Determines the date format
  format: 'mm/dd/yyyy',
  // Determines the date format of the 'datechanged' callback; 'format' config will be used by default
  outFormat: null,
  // Determines the color theme of the date picker
  theme: 'blue',
  // Determines if clicking the date will automatically select it; OK button will not be displayed if true
  auto: false,  
  // Determines if Clear button is displayed
  clearBtn: false,      
  // Determines if Cancel button is displayed
  cancelBtn: false,     
  // Determines if clicking the overlay will close the date picker
  overlayClose: true,   
  // Determines the minimum selectable date
  minDate: null,
  // Determines the maximum selectable date
  maxDate: null,
  // Determines the minimum year of selectable date
  minYear: null,
  // Determines the maximum year of selectable date
  maxYear: null,
  // Determines how many years (earlier than currently selected year) to display in the year selection
  priorYears: 50,
  // Determines how many years (later than currently selected year) to display in the year selection
  laterYears: 25,
  // Array of dates to be disabled (format should be the same as the specified format)
  disabledDates: [],    
  // Array of days of the week to be disabled (i.e. Monday, Tuesday, Mon, Tue, Mo, Tu)
  disabledDays: [],     
  // Determines if date picker range mode is on
  range: false,
  // Range string delimiter
  rangeDelim: '-',
  // Date from target input element (range mode)
  fromTarget: null,     
  // Date to target input element (range mode)
  toTarget: null, 
  // Determines if date picker can select multiple dates
  multiple: false,
  // callback functions
  events: {
    // Callback function on date selection
    dateChanged: null,
    // Function call to execute custom date range format (displayed on the input) upon selection
    onRangeFormat: null,
    // Callback function when date picker is initialized null,  
    ready: null,
    // Callback function when date picker is shown
    shown: null,
    // Callback function when date picker is hidden
    hidden: null
  },
  // internationalization
  i18n: 'en',
  // first day of the week (1 - 7; Monday - Sunday); default will be fetched from i18n.firstDay
  firstDay: null,
  // parent element where the date picker DOM will be added
  root: 'body'
}

Callback functions

events: {
  /**
   * Callback function on date (or date range) selection
   * Parameters: 
   *    data       - Object contains the data of the selected date. Property starting with underscore is a Date object
   *                 Default { _date, date }
   *                 Range mode { _dateFrom, dateFrom, _dateTo, dateTo , value - formatted date range }
   *    datepicker - The date picker object instance
   */
  dateChanged(data, datepicker);

  /**
   * Callback function to for custom date range formatting (displayed on the input) upon selection
   * Parameters:
   *     from - Date object of the selected start date
   *     to   - Date object of the selected end date
   */
  onRangeFormat(from, to);

  /**
   * Callback function when date picker is initialized
   * Parameter:
   *     datepicker - The date picker object instance
   */
  ready(datepicker);

  /**
   * Callback function when date picker is shown
   */
  shown();
  
  /**
   * Callback function when date picker is hidden
   */
  hidden();
}

Formatting

The default string format of the date is mm/dd/yyyy.

Variable	Code	Output
Month	m	1 to 12
	mm	01 to 12
	mmm	Jan
	mmmm	January
Date	d	1
	dd	01
Day	D	Mon (Monday)
	DD	Monday
Year	yy	16
	yyyy	2016

You can specify the format you want by adding a parameter on initialization:

//Initializes the date picker and uses the specified format
duDatepicker('#datepicker', { format: 'mm-dd-yyy' });

The above code will output a date in this format mm-dd-yyyy, for example: 10-31-2016 - which is October 31, 2016. You can specify other format you want, like mmm dd, yyyy which would output something like Oct 01, 2016.