Paragraph...

Some options take effect only if changed before the first datepicker open.

Learn more about options in source code (setters are commented).

Do not forget to call datepicker.render() to start using datepicker.

Changing options after render takes effect immediately only if you call datepicker.render() again.

Pure JavaScript Datepicker by Slevomat.cz.
Github | Download

The Datepicker date selection tool on the web written in pure Javascript (aka Vanilla JS)

<link rel="stylesheet" href="dist/the-datepicker.css">
<script src="dist/the-datepicker.js"></script>
  • var input = document.getElementById('my-input');
  • var container = document.getElementById('my-container');
  • var button = document.getElementById('my-button');
  • var paragraph = document.getElementById('my-paragraph');
  • // var datepicker = new TheDatepicker.Datepicker(input);
  • // var datepicker = new TheDatepicker.Datepicker(input, container);
  • // var datepicker = new TheDatepicker.Datepicker(null, container);
  • // var datepicker = new TheDatepicker.Datepicker(button);
  • // var datepicker = new TheDatepicker.Datepicker(paragraph);
  • // var datepicker = new TheDatepicker.Datepicker(input, null, new TheDatepicker.Options());
  • // direct html input value has priority over this option
  • datepicker.;
  • datepicker.;
  • datepicker.;
  • datepicker.;
  • ; , );

  • // "j" = Day of the month (1 to 31)
    // "d" = Day of the month with leading zero (01 to 31)
    // "D" = Short textual representation of a day of the week (Mo through Su)
    // "l" = Textual representation of a day of the week (Monday through Sunday)
    // "n" = Numeric representation of a month (1 through 12)
    // "m" = Numeric representation of a month with leading zero (01 through 12)
    // "F" = Textual representation of a month (January through December)
    // "M" = Short textual representation of a month (Jan through Dec)
    // "Y" = Full year (1999 or 2003)
    // "y" = Year, 2 digits (99 or 03)
  • ;
  • ;
  • datepicker.options.setCellContentStructureResolver(, );
  • datepicker.options.; // optional argument: resolver
  • datepicker.options.; // optional argument: resolver
  • datepicker.options.; // optional argument: modifier
  • datepicker.options.; // optional argument: listener (applies to all off*)
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.options.;
  • datepicker.render();