Datepickr

Basic example

[]

<div id='datepickr'></div>
<pre id='output'>[]</pre>
<script src='datepickr.min.js'></script>

<script>
var el = document.getElementById('datepickr');
var output = document.getElementById('output');

new Datepickr(el, function(res) {
  output.textContent = JSON.stringify(res);
});
</script>

Days selected on load

var d = new Date();

new Datepickr(document.getElementById('datepickr-activedays'), function(res) {
  console.log(res);
}, {
  activeDays: [
    [new Date(d.getFullYear(), d.getMonth(), 1).getTime(), 1],
    [new Date(d.getFullYear(), d.getMonth(), 2).getTime(), 1],
    [new Date(d.getFullYear(), d.getMonth(), 12).getTime(), 1],
    [new Date(d.getFullYear(), d.getMonth(), 13).getTime(), 1],
    [new Date(d.getFullYear(), d.getMonth(), 22).getTime(), 1],
  ]
});

Inactive past, weekends, & custom days

var d = new Date();
// If the month is December, roll back to January as next month.
var month = ((d.getMonth() + 1) === 12) ? -1 : d.getMonth();

new Datepickr(document.getElementById('datepickr-omit'), function(res) {
    console.log(res);
}, {
  omitPast: true,
  omitWeekends: true,

  // You can also omit the future.
  // omitFuture: true,

  // Omit the 12th, 13th & 22nd of the following month
  // if they don't already fall on a weekend.
  omitDays: [
    new Date(d.getFullYear(), month + 1, 12).getTime(),
    new Date(d.getFullYear(), month + 1, 13).getTime(),
    new Date(d.getFullYear(), month + 1, 22).getTime()
  ]
});

Select half days

[]

<div id='datepickr-half'></div>
<pre id='output-half'>[]</pre>
<script src='datepickr.min.js'></script>

<script>
var el = document.getElementById('datepickr-half');
var output = document.getElementById('output-half');

new Datepickr(el, function(res) {
  output.textContent = JSON.stringify(res);
}, {
  halfDay: true
});
</script>

Refreshing options

<div id='datepickr-half'></div>
<input type='checkbox' id='toggle-refresh'>
<label for='toggle-refresh'>Toggle half days?</label>
<script src='datepickr.min.js'></script>

<script>
var refresh = document.getElementById('datepickr-refresh');
var toggle = document.getElementById('toggle-refresh');

var pickr = new Datepickr(refresh, function(res) {
  console.log(res);
});

toggle.addEventListener('change', function() {
    if (this.checked) {
        pickr.options({
            halfDay: true
        });
    } else {
        pickr.options({
            halfDay: false
        });
    }
});
</script>

Set a min or max

// Set a min and max to the current year.
var now = new Date();
var year = now.getFullYear();

new Datepickr(document.getElementById('datepickr-minmax'), function(res) {
  console.log(res);
}, {
  minDate: new Date(year, 0).getTime(),
  maxDate: new Date(year, 11).getTime()
});

Start on a particular year or month

new Datepickr(document.getElementById('datepickr-start'), function(res) {
  console.log(res);
}, {
  startYear: 2015,
  startMonth: 7
});

UTC selection

new Datepickr(document.getElementById('datepickr-utc'), function(res) {
  console.log(res);
}, {
  utc: true
});

Translated

new Datepickr(document.getElementById('datepickr-translate'), function(res) {
  console.log(res);
}, {
  weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
});

Node/Browserify

// npm install datepickr
var datepickr = require('datepickr')

datepickr(el, function(res) {
  console.log(res);
});