Author: | DateDreamer |
---|---|
Views Total: | 71 views |
Official Page: | Go to website |
Last Update: | September 27, 2023 |
License: | MIT |
Preview:

Description:
DateDreamer is an easy, lightweight, and accessible date picker & calendar component written in Vanilla JavaScript.
More Features:
- Minimal clean themes.
- Dark mode.
- Custom date format.
- Shadow DOM.
- Custom styles.
- And more.
How to use it:
1. Install and import the DateDreamer.
# Yarn $ yarn add datedreamer # NPM $ npm i datedreamer
import * as datedreamer from "datedreamer";
// OR <script src="./dist/datedreamer.js"></script>
2. Display an inline calendar on the page.
<div id="calendar"></div>
new datedreamer.calendar({ element: "#calendar", })
3. Initialize the DateDreamer as a date picker with an input field.
new datedreamer.calendarToggle({ element: "#calendar", })
4. Available options to customize the calendar.
new datedreamer.calendar({ // select date on init selectedDate: "02/15/2023", // date format format: "MM/DD/YYYY", // custom next/prev icons iconNext: '', iconPrev: '', // set the label of the date input inputLabel: 'Set a date', // set the placeholder of the date input inputPlaceholder: 'Enter a date', // hide the input and today button hideInputs: false, // enable dark mode darkMode: false, // or 'lite-purple' theme: 'unstyled', // custom styles here styles: ` button { color: blue } `, // callback onChange: (e) => { console.log(e.detail); }, onRender: (e) => { console.log(e.detail.calendar); }, })
Changelog:
v0.3.2 (09/27/2023)
- update
v0.3.1 (09/20/2023)
- fixed issue with page scrolling while using arrows to change focus date
v0.3.0 (09/19/2023)
- calendar: added keyboard arrow navigation to calendar
v0.2.6 (05/20/2023)
- bugfix
v0.2.5 (04/22/2023)
- bugfix
v0.2.4 (04/19/2023)
- bugfix
v0.2.3 (04/09/2023)
- bugfix
v0.2.2 (03/18/2023)
- bugfix
v0.2.1 (02/24/2023)
- calendar: fixed issue with buttons showing blue in ios
v0.2.0 (02/22/2023)
- Added date range support