Lightweight Accessible Date Picker Component – WC Datepicker

A lightweight, accessible, customizable, multilingual, and framework-agnostic date picker & date range picker component written in pure JavaScript (TypeScript).

How to use it:

1. Install and import the WC Datepicker.

# Yarn
$ yarn add wc-datepicker
# NPM
$ npm i wc-datepicker

// ES Module
import { WcDatepicker } from "./dist/components/wc-datepicker";
// Browser
<script src="./dist/esm/wc-datepicker.js" type="module"></script>

2. Import a theme of your choice.

import "./dist/themes/light.css"; 
import "./dist/themes/dark.css"; 
// OR 
<link rel="stylesheet" href="./dist/themes/light.css" />
<link rel="stylesheet" href="./dist/themes/dark.css" />

3. Add the WC Datepicker to the page. That’s it.

<wc-datepicker></wc-datepicker>

4. Enable date range selection.

<wc-datepicker range></wc-datepicker>

5. Specify the language using the BCP 47 language tag.

<wc-datepicker locale="es-ES"></wc-datepicker>

6. Enable/disable month and year steppers.

<wc-datepicker show-year-stepper show-month-stepper="false"></wc-datepicker>

7. Determine whether to show a clear button inside the date picker.

<wc-datepicker show-clear-button></wc-datepicker>

8. Determine whether to show a Today button inside the date picker.

<wc-datepicker show-today-button></wc-datepicker>

9. Set the start date.

<wc-datepicker start-date="2022-11-03"></wc-datepicker>

10. Customize the first day of the week. 0 = Sunday. 1 = Monday.

<wc-datepicker first-day-of-week="1"></wc-datepicker>

11. Set the currently selected date.

<wc-datepicker value="Date | Date[]"></wc-datepicker>

12. Determine whether the calendar view switches to the start of the range after the end date is selected.

<wc-datepicker go-to-range-start-on-select="true"></wc-datepicker>

13. Set the min/max dates.

<wc-datepicker min-date="" max-data=""></wc-datepicker>

14. Get the selected date(s).

const datepicker = document.getElementById('datepicker');
datepicker.value

15. Disable dates.

datepicker.disableDate = function(date) {
  // disable Sundays
  return date.getDay() === 0;
}

16. Override the default labels.

datepicker.labels = {
  clearButton: 'Clear value',
  monthSelect: 'Select month',
  nextMonthButton: 'Next month',
  nextYearButton: 'Next year',
  picker: 'Choose date',
  previousMonthButton: 'Previous month',
  previousYearButton: 'Previous year',
  todayButton: 'Show today',
  yearSelect: 'Select year'
}

17. Fire an event when a date is selected.

datepicker.addEventListener('selectDate', function(event) {
  console.log(event.detail);
});

18. Fire an event when the month changes.

datepicker.addEventListener('changeMonth', function(event) {
  // CustomEvent { month: number; year: number; day: number }
});

Changelog:

v0.12.0 (05/05/2026)

• Disable the year stepper and month options according to the min-date and max-date attributes

v0.11.0 (04/18/2026)

• Add slots for buttons’ content (customizability)
• Add property to shift focus to start or end of week instead of month, when pressing Home or End (accessibility)
• Set aria-multiselectable when range-option is used (accessibility)
• Set aria-label on role=grid (accessibility)

v0.10.0 (04/14/2026)

• Add min-date and max-date attributes

v0.9.5 (04/08/2026)

• Fix selection of overflow dates via click
• Remove name attributes from navigational month and year inputs

v0.9.4 (02/13/2026)

• Fix focus handling issue in AT browse mode

v0.9.2 (11/09/2025)

• Fix an issue preventing a user to change the month or year

v0.9.1 (08/23/2025)

• Make sure the calendar can retrieve focus, even if the current date is disabled.

v0.9.0 (08/23/2025)

• Add “day” property to “changeMonth” event

v0.8.1 (07/19/2025)

• Limit weekday labels to 3 characters to prevent overflow

v0.8.0 (01/24/2025)

• Add goToRangeStartOnSelect prop

v0.7.0 (01/24/2025)

• Add aria-current=”date” to current date’s cell.

v0.6.0 (09/20/2024)

• Various accessibility improvements.

v0.5.3 (02/07/2023)

• Fix an issue causing months to be skipped when navigating

v0.5.2 (03/04/2023)

• Prevent input of years <0 or >9999

v0.5.1 (01/21/2023)

• Fix timezone adjustments

v0.5.0 (01/15/2023)

• Add classes to mark start and end dates of a range selection

v0.4.0 (11/12/2022)

• Add “disabled” property

v0.3.0 (11/11/2022)

• Add changeMonth event

v0.2.0 (11/07/2022)

• Added dark theme