Date Picker
A pure vanilla JS implementation of Zag JS Date Picker
Anatomy
The Date Picker component consists of the following views
day
month
year
Data attributes
Each date-picker can be set with different settings with the following data-attribute.
Callbacks
Each Date Picker component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the date-picker and a event listener for your event name
document.getElementById("my-callback-date-picker")
?.addEventListener("my-callback-date-picker-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Open your browser's console to see the events received when a date is selected
Locale
You can select locale to be displayed
Use with Form
Date Picker can be used inside a form
You must set the name of the field
data-name="date-picker-name"
You can use the results from the form as you wish
const formBirth = document.getElementById('my-form-birth') as HTMLFormElement | null;
const resultBirth = document.getElementById('result') as HTMLDivElement | null;
if (formBirth && resultBirth) {
formBirth.addEventListener('submit', (e: Event) => {
e.preventDefault();
const formData = new FormData(formBirth);
const dateOfBirth = (formData.get('date-of-birth') as string);
resultBirth.textContent = `Submitted: birth day: ${dateOfBirth}`;
});
}
Range
You can select a range date to be displayed. You must add a second input
Custom (Tailwind)
If you are using Tailwind styling, you can customize each date-picker and its parts with Tailwind utilities
Templates
Date Picker components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.