Jalaali Date-Time Picker

Production-ready Jalali (Persian) date + time picker for React / Next.js.

Fully typedTree-shakable ESMTailwind + ShadCNKeyboard nav

Installation

Add the package & its peer-dependencies.

npm install jalaali-date-time-picker
npm install react next tailwindcss lucide-react

Tailwind configuration

Include the component files so Tailwind can tree-shake unused styles:

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/jalaali-date-time-picker/**/*.{js,ts,jsx,tsx}",
  ],
};

If using globals.css – also @source that path.

RTL support

Wrap with:

<div lang="fa" dir="rtl">...</div>

Quick usage

import { JalaaliDateTimePicker } from "jalaali-date-time-picker";

export default function Example() {
  return (
    <div dir="rtl">
      <JalaaliDateTimePicker onChange={(d) => console.log(d)} />
    </div>
  );
}

Live Demo ↗

Props

Props accepted by `JalaaliDateTimePicker`
Prop	Type	Description	Default
value	`Date \| null`	Controlled value (makes the picker a controlled component)	`null`
defaultValue	`Date`	Initial date for uncontrolled mode	`new Date()`
minDate	`Date`	Earliest selectable date	—
maxDate	`Date`	Latest selectable date	—
disablePast	`boolean`	Disallow dates before today	`false`
disableFuture	`boolean`	Disallow dates after today	`false`
showTime	`boolean`	Display hour / minute selectors	`true`
minuteStep	`number`	Step for minute picker (1 – 30)	`1`
format	`"jalali" \| "gregorian"`	Calendar system used for label & input	`"jalali"`
inline	`boolean`	Render picker inline instead of sheet/dialog	`false`
clearable	`boolean`	Shows “clear” button to reset value	`false`
disabled	`boolean`	Disables trigger & interaction	`false`
trigger	`ReactNode`	Your own trigger element (e.g. input, button)	—
formatLabel	`(d: Date) => string`	Custom label for selected date/time	—
placeholderLabel	`string`	Text shown when no value is selected	Localized default
className	`string`	Extra CSS classes for wrapper	—
onOpenChange	`(open: boolean) => void`	Fires when sheet/dialog toggles	—
onClear	`(prev: Date \| null) => void`	Called after value is cleared	—
inputFieldProps	`{ name, value, onChange, onBlur, ref }`	Bridge for React Hook Form, Formik, etc. (maps to hidden input)	—
inputRef	`Ref<HTMLInputElement>`	Access the internal hidden input directly	—

Project Goals

Remove external deps one-by-one (starting with icons).
Add headless base for custom theming.
Support accessibility & language switching.

Contributing

Fork, dev, open PR. Use pnpm cz to commit.

Author

Ali Julaee Rad