Lightweight Accessible Datepicker Calendar Component – DateDreamer

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


Sponsored

 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.4.0 (05/02/2025)

• added the ability to provide a list of date ranges that the user can click on
• auto dark mode
• bugfixes

v0.3.8 (05/02/2025)

• bugfixes

v0.3.7 (05/01/2025)

• bugfixes

v0.3.6 (08/27/2024)

• Update

v0.3.5 (04/14/2024)

• range: added fix for onRender not firing

v0.3.4 (11/18/2023)

• update

v0.3.3 (10/24/2023)

• update

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

The post Lightweight Accessible Datepicker Calendar Component – DateDreamer appeared first on CSS Script.