@bikiran/chronopick

A modern, accessible, and highly customizable React date and time picker component with Tailwind CSS styling. Perfect for building intuitive date selection experiences in your applications.

Features

• 🗓️ Multiple selection modes: Single date, multiple dates, and date range selection
• ⏰ Time selection: Optional time picker with 12/24 hour format
• ♿ Accessibility first: ARIA compliant with keyboard navigation
• 🎨 Tailwind CSS: Customizable styling with utility classes
• 📱 Responsive design: Works seamlessly across devices
• 🌓 Dark mode: Built-in dark theme support
• 📅 Date constraints: Min/max dates and custom disabled dates
• 🚀 Performance optimized: Efficient rendering with React hooks
• 🎭 Inline & dropdown modes: Flexible display options
• 🌐 Localization support: English included (extensible)

Installation

npm install @bikiran/chronopick
# or
yarn add @bikiran/chronopick

Usage

Basic Usage

import React, { useState } from "react";
import { ChronoPick } from "@bikiran/chronopick";
import "@bikiran/chronopick/dist/style.css";

function App() {
  const [date, setDate] = (useState < Date) | (null > null);

  return (
    <ChronoPick value={date} onChange={setDate} placeholder="Select a date" />
  );
}

Multiple Date Selection

import { ChronoPick, ChronoPickMode } from '@bikiran/chronopick';

function App() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <ChronoPick
      value={dates}
      onChange={setDates}
      mode={ChronoPickMode.Multiple}
      placeholder="Select multiple dates"
    />
  );
}

Date Range with Time Selection

import { ChronoPick, DateRange } from "@bikiran/chronopick";

function App() {
  const [dateRange, setDateRange] =
    useState <
    DateRange >
    {
      from: null,
      to: null,
    };

  return (
    <ChronoPick
      value={dateRange}
      onChange={setDateRange}
      mode="range"
      enableTime={true}
      placeholder="Select date range with time"
    />
  );
}

Inline Calendar

<ChronoPick value={date} onChange={setDate} inline={true} />

API Reference

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | --------------- | ------------------------------------- | | value | Date \| Date[] \| DateRange \| null | - | Current selected date(s) (required) | | onChange | (date: SelectedDateType) => void | - | Selection change handler (required) | | mode | 'single' \| 'multiple' \| 'range' | 'single' | Selection mode | | minDate | Date | - | Minimum selectable date | | maxDate | Date | - | Maximum selectable date | | disabledDates | Date[] \| ((date: Date) => boolean) | - | Disabled dates or validation function | | dateFormat | string | 'YYYY-MM-DD' | Date format string (see below) | | inline | boolean | false | Render calendar inline | | placeholder | string | 'Select Date' | Input placeholder text | | enableTime | boolean | false | Enable time selection |

Date Formatting

Format your dates using these tokens:

| Token | Output | Example | | ------ | ---------------- | ------- | | YYYY | Full year | 2024 | | YY | Two-digit year | 24 | | MMMM | Full month | January | | MMM | Short month | Jan | | MM | Padded month | 01 | | M | Numeric month | 1 | | DD | Padded day | 05 | | D | Numeric day | 5 | | dddd | Full weekday | Monday | | ddd | Short weekday | Mon | | hh | 12-hour (padded) | 09 | | h | 12-hour | 9 | | HH | 24-hour (padded) | 21 | | H | 24-hour | 21 | | mm | Minutes (padded) | 05 | | m | Minutes | 5 | | K | AM/PM | AM |

Example format: "dddd, MMMM D, YYYY hh:mm K" → "Monday, January 15, 2024 09:30 AM"

Customization

Styling with Tailwind

The component is fully stylable with Tailwind CSS. Import the base styles:

import "@bikiran/chronopick/dist/style.css";

Then override these classes in your project:

/* Example customizations */
.chronopick-container {
  @apply shadow-lg rounded-xl;
}

.chronopick-day.selected {
  @apply bg-blue-600 text-white;
}

.chronopick-day.inRange {
  @apply bg-blue-100;
}

Theming

Enable dark mode by adding the dark class to your parent element:

<html class="dark">
  <!-- your app -->
</html>

Accessibility

ChronoPick meets WCAG 2.1 AA standards with:

• Full keyboard navigation
• ARIA roles and attributes
• Screen reader announcements
• Focus management
• High contrast support

Keyboard Controls:

• ↑→↓←: Navigate between dates
• Enter: Select date
• Escape: Close picker
• Tab: Cycle through controls
• Page Up/Down: Navigate months
• Shift + Page Up/Down: Navigate years

Development

Contributing

1. Clone the repository:

git clone https://github.com/bikirandev/chronopick.git
cd chronopick

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build production version:

npm run build

Project Structure

src/
├── components/
│   ├── ChronoPick/
│   │   ├── ChronoPick.tsx        # Main component
│   │   ├── ChronoPickInput.tsx   # Input field
│   │   ├── ChronoPickHeader.tsx  # Calendar header
│   │   ├── CalendarViews/        # Day/Month/Year views
│   │   └── TimePicker.tsx        # Time selection
├── hooks/
│   └── useChronoPickCore.ts      # Core logic hook
├── types/
│   └── index.ts                  # Type definitions
└── utils/
    └── dateUtils.ts              # Date utilities

📄 License

MIT License - see the LICENSE file for details.

👨‍💻 Author

Developed by Bikiran

• 🌐 Website: bikiran.com
• 📧 Email: Contact
• 🐙 GitHub: @bikirandev

Made with ❤️ for the React community

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature

🏢 About Bikiran

Bikiran is a software development and cloud infrastructure company founded in 2012, headquartered in Khulna, Bangladesh. With 15,000+ clients and over a decade of experience, Bikiran builds and operates a suite of products spanning domain services, cloud hosting, app deployment, workflow automation, and developer tools.

| SL | Topic | Product | Description | | --- | ------------ | -------------------------------------------------------------------- | ------------------------------------------------------- | | 1 | Website | Bikiran | Main platform — Domain, hosting & cloud services | | 2 | Website | Edusoft | Education management software for institutions | | 3 | Website | n8n Clouds | Managed n8n workflow automation hosting | | 4 | Website | Timestamp Zone | Unix timestamp converter & timezone tool | | 5 | Website | PDFpi | Online PDF processing & manipulation tool | | 6 | Website | Blog | Technical articles, guides & tutorials | | 7 | Website | Support | 24/7 customer support portal | | 8 | Website | Probackup | Automated database backup for SQL, PostgreSQL & MongoDB | | 9 | Service | Domain | Domain registration, transfer & DNS management | | 10 | Service | Hosting | Web, app & email hosting on NVMe SSD | | 11 | Service | Email & SMS | Bulk email & SMS notification service | | 12 | npm | Chronopick | Date & time picker React component | | 13 | npm | Rich Editor | WYSIWYG rich text editor for React | | 14 | npm | Button | Reusable React button component library | | 15 | npm | Electron Boilerplate | CLI to scaffold Electron.js project templates | | 16 | NuGet | Bkash | bKash payment gateway integration for .NET | | 17 | NuGet | Bikiran Engine | Core .NET engine library for Bikiran services | | 18 | Open Source | PDFpi | PDF processing tool — open source | | 29 | Open Source | Bikiran Engine | Core .NET engine — open source | | 20 | Open Source | Drive CLI | CLI tool to manage Google Drive from terminal | | 21 | Docker | Pgsql | Docker setup for PostgreSQL | | 22 | Docker | n8n | Docker setup for n8n automation | | 23 | Docker | Pgadmin | Docker setup for pgAdmin | | 24 | Social Media | LinkedIn | Bikiran on LinkedIn | | 25 | Social Media | Facebook | Bikiran on Facebook | | 26 | Social Media | YouTube | Bikiran on YouTube | | 27 | Social Media | FB n8nClouds | n8n Clouds on Facebook |