Easy-dates-picker NPM

easy-dates-picker

easy-dates-picker is a super lightweight, zero-dependency, localized, customizable date picker library, written in vanilla JavaScript.

npm bundle size GitHub Workflow Status (with event) GitHub issues GitHub pull requests npm npm NPM

Zero external dependencies
Single or range date selection
Localized - Over 30 languages included
Optionally detect and display the parent page language
Accessible, fully keyboard navigable
Cross-browser compatible
Light and dark mode
Easy to style beyond the defaults
Lightning fast set up

examples

Getting started

The easy-dates-picker is as quick to set up as it is lightweight. For detailed documentation, please view the docs in the repo.

Note: if you use the date picker with a library or framework that uses a virtual DOM (like React), then you might need to make some further modifications.

Install with a package manager

npm install easy-dates-picker

import DatePicker from 'easy-dates-picker';

Install with JS Deliver

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-dates-picker/dist/datepicker.css">
<script src="https://cdn.jsdelivr.net/npm/easy-dates-picker/dist/datepicker.bundle.js"></script>

Example implementation with JS Deliver

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Easy Dates Picker Demo</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easy-dates-picker/dist/datepicker.css">
    </head>
    <body>
        <div id="easy-dates-picker"></div>
        <script src="https://cdn.jsdelivr.net/npm/easy-dates-picker/dist/datepicker.bundle.js"></script>
        <script>
          document.addEventListener('DOMContentLoaded', function () {
            
            function datePickerCallback(startDate) {
              console.log('Date Selected:', startDate.toDateString());
            }

            const options = {
              mode: 'single',
              onSelect: datePickerCallback,
            };
        
            const datePicker = new DatePicker('easy-dates-picker', options);
            datePicker.init();
          });
        </script>
    </body>
</html>