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);
    },
})

API methods:

// Create a calendar instance before calling the public methods.
const calendar = new datedreamer.calendar({
  // your calendar options
});

// Return the currently selected date.
// The method returns a Date object or null when no date is selected.
const selectedDate = calendar.getSelectedDate();
// Return the month currently shown in the calendar view.
const displayedMonth = calendar.getDisplayMonth();
// Return the year currently shown in the calendar view.
const displayedYear = calendar.getDisplayedYear();
// Return the full display name of the current month.
const monthName = calendar.getDisplayMonthName();
// Check whether a specific date matches the active selection.
const selected = calendar.isSelected(new Date(2024, 0, 15));
// Turn off user interaction for the calendar.
calendar.disable();
// Restore user interaction after disabling the calendar.
calendar.enable();
// Move keyboard focus to the date input.
calendar.focusInput();
// Move keyboard focus to the first day button in the current view.
calendar.focusFirstDay();
// Move keyboard focus to the last day button in the current view.
calendar.focusLastDay();
// Clear the current selection and move the calendar back to today.
calendar.clearSelection();
// Restore the calendar to the current selected date.
calendar.resetSelection();
// Show a specific month.
// The month value uses JavaScript's zero-based month index, so 5 means June.
calendar.goToMonth(2024, 5);
// Move the active date backward by one week.
calendar.goToPrevWeek();
// Move the active date forward by one week.
calendar.goNextWeek();
// Move the active date to the first day of the displayed month.
calendar.jumpToStartOfMonth();
// Move the active date to the last day of the displayed month.
calendar.jumpToEndOfMonth();
// Check whether today's date appears in the current calendar view.
const todayVisible = calendar.isTodayVisible();

Events

const calendar = new datedreamer.calendar({
  // your calendar options
});
// Fires when the selected date changes.
// e.detail contains the event payload for the new selection.
calendar.addEventListener(datedreamer.calendar.EVENT_CHANGE, function (event) {
  console.log('Selected date data:', event.detail);
});
// Fires when the displayed month changes.
// e.detail.displayedMonthDate stores the displayed month date value.
calendar.addEventListener(datedreamer.calendar.EVENT_NAVIGATE, function (event) {
  const displayedMonth = new Date(event.detail.displayedMonthDate);
  console.log('Current calendar month:', displayedMonth);
});
// Fires after the calendar finishes rendering.
calendar.addEventListener(datedreamer.calendar.EVENT_RENDER, function (event) {
  console.log('Calendar render finished:', event);
});

Changelog:

v0.5.2 (07/31/2025)

• Add getter and control methods to calendar
• Add getter, control methods, and helper navigation functions
• Bugfixes

v0.4.8 (07/31/2025)

• update

v0.4.3 (07/20/2025)

• bugfixes

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