simple-date-selector

For the full documentation, visit the GitHub repository.

DateSelector

A lightweight JavaScript/TypeScript library for managing date selection with dynamic year, month, and day dropdowns. It automatically updates available options based on user selections to ensure valid dates are displayed.

Features

• Dynamically populate year, month, and day dropdowns.
• Automatically adjusts days based on the selected month and year.
• Easy to integrate with customizable dropdown IDs and ranges.
• Simple to use and configure with pre-selection capabilities.

Installation

npm

npm i simple-date-selector

CDN

<script src="https://unpkg.com/simple-date-selector@1.0.3/lib/index.js"></script>

Usage

HTML Setup:

Add the following dropdowns in your HTML.

<select id="yearId"></select>
<select id="month"></select>
<select id="day"></select>

Metdods:

// Assign custom IDs to the year, month, and day dropdowns.
// Use element(), only when you have custome IDs for the dropdowns.
dateSelector.element('yearId', 'monthId', 'dayId');

// Add a custom range yaers dropdowns
dateSelector.addYears('2000', 'now');

// Set pre-select values
dateSelector.initialize('2020', '7', '7');

---

Full Documentation

For the full documentation, visit the GitHub repository.