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. Get the selected date(s).

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

14. Disable dates.

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

15. 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'
}

16. Fire an event when a date is selected.

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

17. Fire an event when the month changes.

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

Changelog:

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

The post Lightweight Accessible Date Picker Component – WC Datepicker appeared first on CSS Script.