ck-datepicker

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