Cool light visual date picker using native JavaScript

Browsers support: Chrome 45+, FireFox 40+, Safari 8+, IE10+ (since 1.0.1 version), iOS Safari 8+, Android Browser 4.4+

You need to include library javascript and CSS files from dist directory on your page

<link rel="stylesheet" href="dist/css/DatePickerX.min.css">
<script src="dist/js/DatePickerX.min.js"></script>

The DatePickerX extends HTMLInputElement objects through prototypes. It adds DatePickerX object for each input element.

You need just select HTML element and execute init method for date picker initializing.

document.getElementById('myInputId').DatePickerX.init();

Each DatePickerX object contains the following methods:

• init( [Object options] ) - initializes date picker. May take object with initialization options
• remove() - removes date picker
• setValue( Date dt, [Boolean ignoreLimits = false] ) - sets date picker value
• getValue( [Boolean timestamp = false] ) - returns formatted date picker value or timestamp if passed true in first parameter
• getMinDate() - returns min date of date picker
• getMaxDate() - returns max date of date picker

Also DatePickerX provides global DatePickerX object with following methods:

• window.DatePickerX.setDefaults( Object options ) - sets default options for all date pickers

• mondayFirst - if true, set Monday as start week day. Default: true
• format - date format. It's being used for formatting input values and returned values from getValue methods. Default: yyyy/mm/dd. Supports following literals:
  • d - day of the month without leading zeros (1-31)
  • dd - day of the month with leading zeros (01-31)
  • D - textual representation of week day. See weekDayLabels option
  • m - numeric representation of a month without leading zeros (1-12)
  • mm - numeric representation of a month with leading zeros (01-12)
  • M - short textual representation of a month. See shortMonthLabels option
  • MM - full textual representation of a month. See singleMonthLabels option
  • yy - two-digits representation of a year
  • yyyy - four-digits representation of a year
• minDate - minimum date limit. Should be a Date object or null (no limit). Also you may pass another DatePickerX HTML input which selected date will be set as min date dynamically
• maxDate - maximum date limit. Should be a Date object. Also you may pass another DatePickerX HTML input which selected date will be set as min date dynamically
• weekDayLabels - array with textual representation of week days starting with Monday. See D literal for format option. Default: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'St', 'Su']
• shortMonthLabels - array with textual representation of short month names. See M literal for format option. Default: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
• singleMonthLabels: array with textual representation of full month names. See MM literal for format option. Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
• todayButton - if true today button should be enabled. Current date will be set as date picker value by clicking this button. Default: true
• todayButtonLabel - today button label. Default: 'Today'
• clearButton - if true clear button should be enabled. Date picker value will be cleared by clicking this button. Default: true
• clearButtonLabel - clear button label. Default: 'Clear'