ck-datepicker

Production-grade DatePicker with zero dependencies. Modular architecture with slots, hooks, and plugin support.

Installation

``bash
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 |

License

MIT © BW UI