JavaScript Date & Date Range Picker with Localization and Accessibility – easy-dates-picker

Preview:

Description:

easy-dates-picker is a lightweight, accessible, and performant JavaScript date-picker library that requires no external dependencies.

It allows users to quickly select single or range dates with 30+ language support. For those concerned about aesthetics, it offers both light and dark modes and is easily customizable to fit your site’s style.

How to use it:

1. Install and import the easy-dates-picker.

# NPM
$ npm install easy-dates-picker

// ES Module
import DatePicker from 'easy-dates-picker';

// Browser
<link rel=”stylesheet” href=”../dist/datepicker.css” />
<script src=”../dist/datepicker.bundle.js”></script>

2. Create a DIV element to hold the date picker.

<div id="easy-dates-picker"></div>

3. Initialize the easy-dates-picker to render a basic date picker on the page.

const datePicker = new DatePicker('easy-dates-picker');
datePicker.init();

4. Enable/disable date range selection.

const datePicker = new DatePicker('easy-dates-picker',{
      mode: 'range'
});

5. Set the language of the date picker. Available languages:

• Bulgarian (bg-BG)
• Czech (cs)
• Danish (da)
• German (de)
• Greek (el)
• English (en)
• Spanish (es)
• Finnish (fi)
• French (fr)
• Croatian (hr-HR)
• Hungarian (hu)
• Indonesian (id)
• Italian (it)
• Japanese (ja)
• Korean (ko)
• Lithuanian (lt-LT)
• Dutch (nl)
• Norwegian Bokmål (nb)
• Polish (pl)
• Brazilian Portuguese (pt-BR)
• European Portuguese (pt-PT)
• Romanian (ro-RO)
• Russian (ru)
• Slovak (sk-SK)
• Slovenian (sl-SL)
• Swedish (sv)
• Thai (th)
• Turkish (tr)
• Vietnamese (vi)
• Chinese (Simplified) (zh-CN)
• Chinese (Traditional) (zh-TW)

const datePicker = new DatePicker('easy-dates-picker',{
      language: 'fr'
});

6. Or let the date picker automatically select the appropriate country based on your page language.

const datePicker = new DatePicker('easy-dates-picker',{
      usePageLanguage: true,
      usePageLanguageFallback: 'en'
});

7. More date picker options and callbacks.

const datePicker = new DatePicker('easy-dates-picker',{
      // Array of week day indexes that won't be selectable.
      // 0 = sunday, 1 = monday
      blockedDays: [0, 6], 
      // Show the day name at the top of the date picker
      showDayNames: true,
      // Display in input filed with the selected date(s)
      textInputEnabled: true, 
      // Enable/disable dark mode
      darkMode: false, // Use light or dark colour scheme
      
      // Square or round
      cornerStyle: 'round', 
      // Allow users to select dates in the past
      selectPastDatesEnabled: true, 
      // Callback
      onSelect: function(startDate, endDate){
        // do something
      }
      
});

Changelog:

v0.1.6 (12/14/2023)

• Fix: Absolution positioning on container