Lightweight Accessible Date Picker Component – WC Datepicker

Category: Date & Time , Javascript | February 6, 2023
Views Total:1,623 views
Official Page:Go to website
Last Update:February 6, 2023


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 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.


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

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

12. Disable dates.

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

13. 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'

14. Fire an event when a date is selected.

datepicker.addEventListener('selectDate', function(event) {

15. Fire an event when the month changes.

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


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

You Might Be Interested In:

Leave a Reply