Date Selector

The DateSelector component provides a flexible date selection input with support for Gregorian and Hijri calendars. It allows switching between both modes, supports multiple views (day, month, year).

import { DateSelector } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
label	string	"Date"	Label for the date selector.
views	("Day" | "Month" | "Year")[]	["Day","Month","Year"]	Controls which parts of the date to show.
outputDate	"hijri" | "gregorian"	"gregorian"	Format of the emitted value.
isHijri	boolean	false	Sets the initial mode to Hijri if true.
onToggle	(isHijri: boolean) => void	-	Callback fired when the calendar mode changes. Receives true for Hijri and false for Gregorian.
format	string	"DD/MM/YYYY"	Date format used for parsing and displaying values.
value	string	-	Controlled value of the date.
className	string	-	Additional Tailwind classes for the container.
error	string	-	Error message displayed below the field.
onChange	(value: string) => void	-	Callback fired when the formatted output value changes.
onDateChange	(gregorianDate: string, hijriDate: string) => void	-	Callback fired with both Gregorian and Hijri values on change.
form	{ controller: any; control: any; name: string; }	-	Enables usage inside a react-hook-form Controller.
min	string	-	Minimum date allowed.
max	string	-	Maximum date allowed.
hideToggle	boolean	false	Hides the toggle switch between Gregorian and Hijri modes.
disabled	boolean	false	Disables the date selector.
itemClassName	string	-	Additional Tailwind classes for the select items.

Usage

With Form Controlled

import { useState } from "react";

export function Example() {
  const [value, setValue] = useState("");

  return (
    <DateSelector
      label="Date"
      onDateChange={(gregorian, hijri) => setValue(gregorian)}
      value={value}
    />
  );
}

Hijri Mode by Default

<DateSelector
  label="تاريخ هجري"
  isHijri
  outputDate="hijri"
  format="DD/MM/YYYY"
/>

Track Calendar Mode

const [isHijri, setIsHijri] = useState(false);

return <DateSelector label="Date" onToggle={(hijri) => setIsHijri(hijri)} />;

Month & Year Only

<DateSelector
  label="Expiry Date"
  views={["Month", "Year"]}
  onChange={(val) => console.log("Expiry:", val)}
/>

With React Hook Form

import { Controller, useForm } from "react-hook-form";

const { control } = useForm({
  defaultValues: {
    eventDate: "",
  },
});

<DateSelector
  label="Event Date"
  form={{
    controller: Controller,
    control,
    name: "eventDate",
  }}
/>;

With Min and Max Dates

<DateSelector
  label="Meeting Date"
  id="meeting-date"
  min="2024-01-01"
  max="2024-12-31"
/>

Hide Toggle Switch

<DateSelector label="Meeting Date" hideToggle />

Features

• Toggle between Gregorian and Hijri calendars.
• Configurable views (Day, Month, Year).
• Supports multiple languages via useLanguage.
• Dynamic day calculation based on month/year selection.
• Error state with custom styling.

Notes

• Dates are internally managed using moment and moment-hijri.
• Emits both Gregorian and Hijri dates through onDateChange.
• Hijri toggle switch styled with bg-gradient-primary when active.