ck-datepicker

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

Installation

npm install ck-datepicker

Quick Start

import { BWDatePicker } from "ck-datepicker";
import "ck-datepicker/css";

const picker = new BWDatePicker("#date-input");

With Plugins

Plugins are separate packages:

npm install @bw-ui/plugin-disable-weekends
npm install @bw-ui/plugin-min-max-date

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

Constructor

const picker = new BWDatePicker(element, options);

Options

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

Methods

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

Events

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