Date Picker

The DatePicker component is a styled date selection input with floating label, error states, form integration (React Hook Form), and options to disable past dates. It uses a popover calendar for date selection and formats the chosen date as YYYY-MM-DD.

import { DatePicker } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
label	string	—	Floating label displayed inside the button.
id	string	—	Unique identifier for the component.
error	string	—	Error message displayed below the picker.
className	string	—	Additional Tailwind classes for the button container.
disabled	boolean	false	Disables the picker.
disablePast	boolean	false	Prevents selection of past dates.
value	string	—	Selected date value (YYYY-MM-DD).
onChange	(date: string) => void	—	Callback triggered when the date changes.
form	{ controller: any; control: any; name: string }	—	Integration with React Hook Form via Controller.
modal	boolean	true	The modality of the popover. When set to false, users can interact with elements outside the popover, and the popover content does not restrict focus or visibility.
icon	React.ReactNode	—	Custom icon for the date picker button.
min	string	—	Minimum date that can be selected.
max	string	—	Maximum date that can be selected.
format	string	YYYY-MM-DD	Date format for display and value.
views	("Day" | "Month" | "Year")[]	["Day","Month","Year"]	Controls which parts of the date to show.
captionLayout	("dropdown" | "label" | "dropdown-years" | "dropdown-months")	"dropdown"	Controls the layout of the month caption.
wrapperClassName	string	—	Additional Tailwind classes for the wrapper

---

Usage

With Controlled Form

import { useState } from "react";

import { DatePicker } from "tawuniya/components";
import { DatePicker } from "tawuniya/components";

export default function BasicExample() {
  const [date, setDate] = useState("");

  return (
    <DatePicker label="Select Date" id="date" value={date} onChange={setDate} />
  );
}

Disable Past Dates

<DatePicker label="Meeting Date" id="meeting-date" disablePast />

With Error Message

<DatePicker label="Birthdate" id="birthdate" error="Birthdate is required" />

With Custom Icon

<DatePicker icon={<Icon name="calendar-outline" />} />

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { DatePicker } from "tawuniya/components";

export default function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { appointment: "" },
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DatePicker
        label="Appointment Date"
        id="appointment"
        form={{ controller: Controller, control, name: "appointment" }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

With Min and Max Dates

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

With Custom Format

<DatePicker label="Meeting Date" id="meeting-date" format="DD/MM/YYYY" />

With Views

<DatePicker label="Meeting Date" id="meeting-date" views={["Month", "Year"]} />

With Caption Layout

<DatePicker label="Meeting Date" id="meeting-date" captionLayout="label" />

Notes

• The floating label animates upward when a date is selected.
• If disablePast is true, all dates before today will be disabled in the calendar.
• Works as a controlled component using value + onChange, or with React Hook Form via the form prop.