Introduction

A modern, accessible, and timezone-aware date & time picker for React applications.

Why Chronos Picker?

Building a date picker is hard. Building one that handles timezones correctly is even harder. Chronos Picker was built to solve the complex challenges of scheduling across different timezones while providing a beautiful, accessible user experience.

Key BenefitUnlike standard date pickers that operate in the user's local time, Chronos Picker allows you to specify exactly which timezone the selection should be made in.

Features

  • Timezone Aware: Built on top of Luxon for robust timezone handling.
  • Accessible: Fully WCAG 2.1 compliant with keyboard navigation.
  • Modern UI: Clean aesthetics with smooth animations.
  • Responsive: optimized for mobile and desktop devices.
  • Type-Safe: Written in TypeScript with comprehensive type definitions.

Quick Start

Get up and running in seconds.

Install via npm
1npm install @theengineerguy/chronos-picker luxon

Then import and use the component:

1import { DateTimePicker } from "@theengineerguy/chronos-picker";
2import "@theengineerguy/chronos-picker/dist/style.css";
3

4function App() {
5  return (
6    <DateTimePicker
7      onChange={(value) => console.log(value)}
8      placeholder="Pick a date..."
9    />
10  );
11}

Check out the Installation guide for more details.