Production-grade DatePicker with zero dependencies. Modular architecture with slots and hooks.
npm install ck-datepickerbash
npm install ck-datepicker
`
Quick Start
`javascript
import { BWDatePicker } from "ck-datepicker";
import "ck-datepicker/css";
const picker = new BWDatePicker("#date-input");
`
With Plugins
Plugins are separate packages:
`bash
npm install @bw-ui/plugin-disable-weekends
npm install @bw-ui/plugin-min-max-date
`
`javascript
import { BWDatePicker } from "ck-datepicker";
import { DisableWeekendsPlugin } from "@bw-ui/plugin-disable-weekends";
import { MinMaxDatePlugin } from "@bw-ui/plugin-min-max-date";
const picker = new BWDatePicker("#date")
.use(DisableWeekendsPlugin)
.use(MinMaxDatePlugin, {
min: new Date(),
max: new Date(2025, 11, 31),
});
`
Features
- ✅ Zero dependencies
- ✅ ~15KB minified
- ✅ Plugin system
- ✅ Custom slots (templates)
- ✅ Hooks for customization
- ✅ Full keyboard navigation
- ✅ ARIA accessible
- ✅ TypeScript support
API
$3
`javascript
const picker = new BWDatePicker(element, options);
`
$3
| Option | Type | Default | Description |
| ------------- | -------- | --------------- | --------------------- |
| initialDate | Date | null | Pre-selected date |
| format | string | 'MMM D, YYYY' | Display format |
| slots | object | {} | Custom slot renderers |
| plugins | array | [] | Plugins to install |
$3
`javascript
picker.open(); // Open picker
picker.close(); // Close picker
picker.getSelectedDate(); // Get selected date
picker.setSelectedDate(d); // Set selected date
picker.use(Plugin, opts); // Install plugin
picker.destroy(); // Cleanup
`
$3
`javascript
picker.on("date:select", ({ date }) => {});
picker.on("picker:open", () => {});
picker.on("picker:close", () => {});
`
Available Plugins
| Package | Description |
| -------------------------------- | ------------------------- |
| @bw-ui/plugin-disable-weekends | Disable Saturday & Sunday |
| @bw-ui/plugin-min-max-date` | Restrict to date range |