Lightweight Accessible Datepicker Calendar Component – DateDreamer

Category: Date & Time , Javascript | November 17, 2023
Author:DateDreamer
Views Total:822 views
Official Page:Go to website
Last Update:November 17, 2023
License:MIT

Preview:

Lightweight Accessible Datepicker Calendar Component – DateDreamer

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

You Might Be Interested In:


Leave a Reply