Stimulus Datepicker Demo

stimulus-datepicker is a Stimulus-powered, accessible datepicker.

For documentation, please see the GitHub repository.

Here are a few examples showing the default behaviour and a custom format.

This is v1.0.9.

Default, no date initially


<div data-controller="datepicker">
  <input data-datepicker-target="input" type="text" name="foo"/>
  <button data-datepicker-target="toggle">...icon...</button>
</div>

The default format is %Y-%m-%d, e.g. 2022-02-28.

Choose a date:

Default, date given initially


<div data-controller="datepicker">
  <input data-datepicker-target="input" type="text" name="foo" value="2022-06-05"/>
  <button data-datepicker-target="toggle">...icon...</button>
</div>

The initial date here is 2022-06-05.

Choose a date:

Custom format


<div data-controller="datepicker" data-datepicker-format-value="%-d %b %y">
  <input data-datepicker-target="input" type="text" name="foo" value="2022-08-05"/>
  <button data-datepicker-target="toggle">...icon...</button>
</div>

The initial date is 2022-08-05. The custom format here is %-d %b %y. You can use any relevant strftime directive.

Min date with custom format and client-side validation


<div data-controller="datepicker"
     data-datepicker-format-value="%B %-d, %Y"
     data-datepicker-min-value="2022-05-10"
     data-datepicker-underflow-message-value="Date must be %s or later.">
  <input data-datepicker-target="input" type="text" name="foo" value="2022-05-12"/>
  <button data-datepicker-target="toggle">...icon...</button>
</div>

The initial date here is 2022-05-12 and the min date is two days before.

Choose a date:

Disallow weekends and specific dates


<div data-controller="datepicker"
     data-datepicker-allow-weekends-value="false"
     data-datepicker-disallow-value='["2023-12-25","2024-01-01"]'>
  <input data-datepicker-target="input" type="text" name="foo" value="2023-12-01"/>
  <button data-datepicker-target="toggle">...icon...</button>
</div>

The initial date here is 2023-12-01. Weekends, Christmas Day, and New Year's Day cannot be selected.

Choose a date: