hcg-date-picker

Vanilla JavaScript date picker with calendar, date range (hover preview), multiple dates, event labels, time, and datetime modes. Zero dependencies.

• GitHub: github.com/html-code-generator/hcg-date-picker
• Documentation: html-code-generator.com/javascript/date-picker-library

Install

npm install hcg-date-picker

Usage

Pass options in JavaScript when you create the picker (there is no data-attribute configuration).

import hcgDatePicker from "hcg-date-picker";
import "hcg-date-picker/hcg-date-picker.css";

const picker = hcgDatePicker("#birthday", {
  onChange: (dates, formatted) => console.log(formatted),
});

<input type="text" id="birthday" placeholder="Date of birth" readonly>

Click the header title to open month and year views, then pick year → month → day. Useful for birth dates without stepping through every month.

Modes

// Date + time
hcgDatePicker("#when", { enableTime: true });

// Time only
hcgDatePicker("#time", { mode: "time", hour12: true });

// Month only (value like 2026-07)
hcgDatePicker("#period", { mode: "month" });

// Year only (value like 2026)
hcgDatePicker("#report-year", { mode: "year" });

// Date range (hover preview after start date)
hcgDatePicker("#range", { mode: "range" });

// Multiple dates
hcgDatePicker("#many", { mode: "multiple" });

// Labels under days (ticket prices, holidays)
hcgDatePicker("#prices", {
  events: {
    "2026-07-05": "$189",
    "2026-07-12": "$249",
  },
});

// Whitelist only these days
hcgDatePicker("#slots", {
  enabledDates: ["2026-07-05", "2026-07-12", "2026-07-19"],
});

API helpers

hcgDatePicker.get("#birthday");
hcgDatePicker.destroy("#birthday");
hcgDatePicker.reset("#birthday");
hcgDatePicker.destroyAll();
console.log(hcgDatePicker.version);

More documentation

Full API reference, live demos, options tables, React notes, and styling guide:

www.html-code-generator.com/javascript/date-picker-library

• GitHub: github.com/html-code-generator/hcg-date-picker

License

MIT