Vanilla JavaScript date picker with calendar, date range (hover preview), multiple dates, event labels, time, and datetime modes. Zero dependencies.
- npm: npmjs.com/package/hcg-date-picker
- Documentation & demo: html-code-generator.com/javascript/date-picker-library
- Zero dependencies: one JavaScript file and a companion CSS stylesheet
- Single date, date range with hover preview, multiple dates, month-only, year-only, time-only, and datetime modes
- Calendar
eventsmap for labels under day numbers (ticket prices, holidays, and more) - Click the month/year title to jump months and years (fast birth-date selection)
- minDate, maxDate, disabledDates, enabledDates, inline calendar
- Keyboard support (arrows, Enter, Escape)
open(),close(),setDate(),clear(),destroy(), and more- TypeScript definitions and React wrapper included
Use the Documentation & demo link above for the live interactive demo on the website.
After cloning this repository, open index.html in your browser for a local demo.
<link rel="stylesheet" href="hcg-date-picker.css">
<script src="hcg-date-picker.js"></script>npm install hcg-date-pickerimport hcgDatePicker from "hcg-date-picker";
import "hcg-date-picker/hcg-date-picker.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hcg-date-picker@1/hcg-date-picker.css">
<script src="https://cdn.jsdelivr.net/npm/hcg-date-picker@1/hcg-date-picker.js"></script>Pass options in JavaScript when you create the picker (there is no data-attribute configuration).
<link rel="stylesheet" href="hcg-date-picker.css">
<input type="text" id="birthday" placeholder="Date of birth" readonly>
<script src="hcg-date-picker.js"></script>
<script>
const picker = hcgDatePicker("#birthday", {
onChange: (dates, formatted) => console.log(formatted),
});
</script>Click the header title (for example July 2026) to open the month grid, click the year to open the year grid, pick a year, then a month, then a day.
hcgDatePicker.get("#birthday");
hcgDatePicker.destroy("#birthday");
hcgDatePicker.reset("#birthday");
hcgDatePicker.destroyAll();
console.log(hcgDatePicker.version);Full API reference, live demos, options tables, React notes, and styling guide:
www.html-code-generator.com/javascript/date-picker-library
MIT