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

Category: Date & Time , Javascript | December 14, 2023
Author:sandypockets
Views Total:379 views
Official Page:Go to website
Last Update:December 14, 2023
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply