Author: | Sqrrl |
---|---|
Views Total: | 1,093 views |
Official Page: | Go to website |
Last Update: | March 4, 2023 |
License: | MIT |
Preview:

Description:
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. Get the selected date(s).
const datepicker = document.getElementById('datepicker'); datepicker.value
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) { console.log(event.detail); });
15. Fire an event when the month changes.
datepicker.addEventListener('changeMonth', function(event) { // CustomEvent { month: number; year: number; } });
Changelog:
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