Categories: CSSScriptWeb Design

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

rssfeeds-admin

Share
Published by
rssfeeds-admin

Recent Posts

How Yasujirō Ozu Learned to Use Color in His Masterful Films: A New Every Frame a Painting Video Essay

Yasujirō Ozu was born in 1903, and made films from the late nineteen-twenties up until…

8 minutes ago

Speed, Alcohol Suspected in Two-Vehicle Crash on Airport Expressway

FORT WAYNE, Ind. — Fort Wayne police are investigating a serious overnight crash that left…

16 minutes ago

Governor Mike Braun Pauses Indiana Gas and Sales Taxes Amid Energy Emergency

INDIANAPOLIS, Ind. (May 6, 2026) — Indiana motorists will see immediate relief at the pump…

21 minutes ago

Governor Mike Braun Pauses Indiana Gas and Sales Taxes Amid Energy Emergency

INDIANAPOLIS, Ind. (May 6, 2026) — Indiana motorists will see immediate relief at the pump…

21 minutes ago

Governor Mike Braun Pauses Indiana Gas and Sales Taxes Amid Energy Emergency

INDIANAPOLIS, Ind. (May 6, 2026) — Indiana motorists will see immediate relief at the pump…

21 minutes ago

No Suspect Identified After Threat Prompts Concord Junior High Shutdown

ELKHART COUNTY, Ind. — Students at Concord Junior High will not be in class Wednesday…

21 minutes ago

This website uses cookies.