Lightweight Accessible Datepicker Calendar Component – DateDreamer

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