Javascript datepicker from to

Datepicker.js

Select multiple dates. Click & drag to toggle a range of dates.

 var multi = new Datepicker('#multi', < multiple: true >); 

Ranged & Time Picker

Set to inline on hidden inputs.

 var ranged = new Datepicker('#ranged', < inline: true, ranged: true, time: true >); 

Data Attributes & Constraints

Data attributes override options.

 var constrained = new Datepicker('#constrained', < // 10 days in the past min: (function()< var date = new Date(); date.setDate(date.getDate() - 10); return date; >)(), // 10 days in the future max: (function()< var date = new Date(); date.setDate(date.getDate() + 10); return date; >)() >); 

Advanced Customizations

Alter templates & add classNames for custom styles.

 .datepicker.custom < display: block; >.datepicker.custom table th < color: #888; >.datepicker.custom .datepicker__wrapper < background: #333; width: 100%; padding: 0; >.datepicker.custom .datepicker__pane < float: left; width: 33.333%; padding: 0.5rem; >.datepicker.custom .datepicker__pane:not(:first-child) .datepicker__prev, .datepicker.custom .datepicker__pane:not(:last-child) .datepicker__next < display: none; >.datepicker.custom .datepicker__day div:hover, .datepicker.custom .datepicker__day.is-highlighted:not(.is-selected) div < background: #444; >.datepicker.custom .datepicker__daynum < color: white; >.datepicker.custom .datepicker__day.is-selected div:hover < background: #2196F3; >.datepicker.custom .datepicker__day.is-disabled.is-selected div, .datepicker.custom .datepicker__day.is-otherMonth.is-selected div, .datepicker.custom .datepicker__day.is-disabled.is-selected + .is-selected div::before, .datepicker.custom .datepicker__day.is-otherMonth.is-selected + .is-selected div::before < background: #444; >.datepicker.custom .datepicker__day.is-disabled .datepicker__daynum, .datepicker.custom .datepicker__day.is-otherMonth .datepicker__daynum < color: #444; >.datepicker.custom .datepicker__day.is-disabled.is-selected .datepicker__daynum, .datepicker.custom .datepicker__day.is-otherMonth.is-selected .datepicker__daynum

 var custom = new Datepicker('#custom', < multiple: true, inline: true, classNames: < node: 'datepicker custom' >, templates: < container: [ '
', '', '
', '', '', '
', ' %>', '
' ].join('') > >); 

Options

inline: true|false Best used with hidden inputs. Enabling this will render the Datepicker inline with the input and prevent show/hide functionality. multiple: true|false Enables the ability for multiple dates to be selected. Clicking and dragging selects/deselects a range of dates. ranged: true|false Forces the selection to a range of dates. Subsequent clicks and dragging select a new range. time: true|false|»ranged» Enables a single time picker for non-ranged Datepickers when `true`. For ranged Datepickers, or when `time` is `»ranged»`, two time pickers are rendered: «start» and «end». openOn: Date|»first»|»last»|»today» Default place the Datepicker will open to. A specified date, today, or the first/last date within the selected dates. Default `»first»`. min/max: Date|false Minimum and maximum dates available to select from. Default `false`. within: [Date. ]|false If provided, only dates within this array will be allowed. Default `false`. without: [Date. ]|false If provided, dates within this array will be excluded. Default `false`. yearRange: Integer How many years forward & backward from the active year the Datepicker will display in the year dropdown menu. Default `5`. weekStart: Integer Index of the day of the week to start on, `0-6`. `0 == Sunday`, `1 == Monday`, etc. Default `0`. defaultTime: Object|Array Default time when the `time` option is enabled. Given an array of `[hours, minutes]`, will set both the start and end default times. An object consisting of `start` and `end` arrays will set them individually. Default `< start: [0, 0], end: [12, 0] >`. separator: String The separator used when serializing multiple dates. Default `»,»`. serialize: (Date) => String Transforms a date into a string to be set as the value of the input. deserialize: (String) => Date Parses a string into a date. Called whenever a date string is used instead of a date object. toValue: ([Date. ]) => String Transforms the current selected dates to a string used to set the value of the input element. fromValue: (String) => [Date. ] Parses the value of the input into an array of selected dates. onInit: (Element) Called after initialization with the original input element as the only parameter. onChange: (Date|[Date. ]) Called whenever the selected dates change or when the time or time range is updated. The currently selected date(s) are passed; start and end times are set on the respective start and end dates. onRender: (Element) Called whenever the Datepicker is rendered. The element passed is the first child from the resulting templates.

Methods

#.set(prop, value, noRedraw) Set options prop Option key, or object of properties value Value of option (not used if object present) noRedraw Do not redraw the calendar afterwards #.get(key) Get an option key Option key #.update() Update the bound element and trigger onUpdate callback #.open(date) Option the calendar to a specific date (or openOn date) date The date to open to #.show() Add classes to show the datepicker #.hide() Remove classes to hide the datepicker #.next(paginate) Go to the next month paginate How many months to skip #.prev(paginate) Go to the previous month paginate How many months to skip #.goToDate(date) Go to a specific date date Date to set the calendar to #.hasDate(date) Check the value for a specific date date The date to check for #.addDate(date) Add a date to the value date The date to add #.removeDate(date) Remove a date from the value date The date to remove #.toggleValue(date, force) Toggle a date selection date Date to toggle force Force to selected/deselected #.setValue(date) Set the value to a specific date date The date value #.getValue() Get the value of the datepicker #.dateAllowed(date) Check if a date is allowed in the datepicker date The date to check dim The dimension to check (‘year’ or ‘month’) #.draw() Draw the datepicker inner HTML #.render(i) Render a single month’s HTML i Offset month to render #.toString() Basic `toString` method