Demos and Usage: http://chmln.github.io/flatpickr

A super lightweight (only 2.75kb minified and gzipped), feature-packed date picker with no external dependencies.

The easiest way to start:

flatpickr('#inputElementId');

Obviously replace 'inputElementId' with the actual id of the input element you will be using.

You can pass in any selector that is supported by querySelectorAll (by default, more on this below):

flatpickr('#some .complex [selector]');

You can also pass in a node directly:

flatpickr(document.getElementById('myId'));

You can also customize each flatpickr instance by passing in some extra config options. The default values that can be overridden are:

Change the default date format:

<script>
    flatpickr('.someClassName', { dateFormat: 'd-m-Y' });
</script>

Specify a min and max date:

<script>
    flatpickr('#minAndMax', {
        // today
        minDate: new Date(),
        // some point in the future
        maxDate: new Date("2015-12-31")
    });
</script>

Disable a date range:

<script>
    flatpickr('#sampleInput', {
        disable: [ { 'from': '2015-09-02', 'to': '2015-10-02' } ]
    });
</script>

Use an alternate input and format:

<input id="userInput">
<input id="altInput" type="hidden">

<script>
    flatpickr('#userInput', {
        dateFormat: 'l, F d, Y', // Wednesday, January 15, 2014
        altInput: document.getElementById('altInput'),
        altFormat: 'm-d-Y' // 01-15-2014
    });
</script>

Note: Suffixes have been removed because JavaScript's Date.parse didn't like them.

To escape a character (if you need to use one of the reserved format characters above) use a double backslash: \\

Example:

dateFormat: '\\Da\\y picke\\d: Y/m/d'

To get something like:

Day picked: 2013/02/12

If you do not escape the characters you would end up with something like this instead:

Tuea13 picke12: 2013/02/12

Which is probably not what you want...

flatpickr supports localizing text in a similar way to modifying the methods (above).

Weekdays in french:

<script>
    flatpickr.prototype.l10n.weekdays.longhand = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'];
    flatpickr('#yourId');
</script>

Start the calendar on Monday instead of Sunday:

<script>
    flatpickr.prototype.l10n.firstDayOfWeek = 1;
    flatpickr('#yourId');
</script>