Datepicker.js

Examples | Options | Methods | Download

Quickstart

Include the files


        ...
        <!-- or another theme from `dist/css` -->
        <link rel="stylesheet" href="datepicker.material.css">
        <script src="datepicker.js"></script>
        ...

Distinguish the Datepickers


        <input type="text" id="datepicker">

Initialize Datepicker.js


        var datepicker = new Datepicker('#datepicker');

Examples

Default

Called on an input with no options.


              
              
            

              var simple = new Datepicker('#simple');

Multiple Dates

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 {
                color: rgba(255,255,255,0.1);
              }
            

              
            

              var custom = new Datepicker('#custom', {
                multiple: true,
                inline: true,

                classNames: {
                  node: 'datepicker custom'
                },

                templates: {
                  container: [
                    '<div class="datepicker__container">',
                      '<% for (var i = -1; i <= 1; i++) { %>',
                        '<div class="datepicker__pane">',
                          '<%= renderHeader(i) %>',
                          '<%= renderCalendar(i) %>',
                        '</div>',
                      '<% } %>',
                    '</div>'
                  ].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.