easy-dates-picker

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

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

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>

How to Contribute

Contributions are welcome! If you have a feature request, bug report, or a suggestion, please open an issue in the GitHub repository.

For more information, view the contributing docs in the repo.

License

MIT. See LICENSE.md