DatePicker

Code

import { DatePicker, Field, FieldDescription, FieldLabel } from "@fadymondy/nasaq/web";import { useState } from "react";export function Example() {  const [date, setDate] = useState<Date | null>(null);  return (    <Field>      <FieldLabel>Start date</FieldLabel>      <DatePicker value={date} onValueChange={setDate} min={new Date()} />      <FieldDescription>Work begins on this day.</FieldDescription>    </Field>  );}

Pickers · beta

Live examples and controls: DatePicker in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/date-picker.json

DatePicker and DateRangePicker are a form control that looks like an Input: a button showing the chosen date, which opens a Calendar in a Popover. TimePicker is an hour / minute (/ AM-PM) group of selects. All three work inside Field (label, description, error, invalid state).

When to useCopy Anchor Link

• A date, a date range or a time of day in a form.

When not to useCopy Anchor Link

• Always-visible month grids (scheduling views): use Calendar.
• Durations or free numbers: use a number Input.

ImportCopy Anchor Link

import { DatePicker, DateRangePicker, TimePicker } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { DatePicker, Field, FieldDescription, FieldLabel } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Example() {
  const [date, setDate] = useState<Date | null>(null);
  return (
    <Field>
      <FieldLabel>Start date</FieldLabel>
      <DatePicker value={date} onValueChange={setDate} min={new Date()} />
      <FieldDescription>Work begins on this day.</FieldDescription>
    </Field>
  );
}

AnatomyCopy Anchor Link

DatePicker / DateRangePicker
  Popover
    trigger button        data-slot="date-picker-trigger"  (Field.Control)
    PopoverContent > Calendar
TimePicker                data-slot="time-picker"
  select                  data-slot="time-picker-hour" | "time-picker-minute" | "time-picker-period"

APICopy Anchor Link

Shared by DatePicker and DateRangePicker:

DatePicker: value, defaultValue (Date | null), onValueChange(value: Date | null). It closes on pick.

DateRangePicker: value, defaultValue (DateRange), onValueChange(value: DateRange), numberOfMonths (1 | 2; default two from 640px wide, else one). It closes when both ends are chosen.

TimePicker:

ExamplesCopy Anchor Link

import { DateRangePicker, Field, FieldLabel, TimePicker } from "@fadymondy/nasaq/web";

export function Arabic() {
  return (
    <div dir="rtl" lang="ar">
      <Field>
        <FieldLabel>الفترة</FieldLabel>
        <DateRangePicker locale="ar-SA" />
      </Field>
      <Field>
        <FieldLabel>وقت الاجتماع</FieldLabel>
        <TimePicker locale="ar-SA" defaultValue="14:30" minuteStep={15} />
      </Field>
    </div>
  );
}

AccessibilityCopy Anchor Link

The trigger is a button with aria-haspopup="dialog"; FieldLabel targets it. Focus moves to the selected day when the popup opens and returns to the trigger on close. Calendar keys are listed in the Calendar README. TimePicker segments are native selects labelled Hour / Minute / AM-PM (Arabic built in); the hour segment is the Field control.

RTL & i18nCopy Anchor Link

Trigger text, month names and day periods follow the locale; digits stay Western. The popup and calendar mirror in RTL. Pass locale/dir when the picker is outside a NasaqProvider.

Styling & tokensCopy Anchor Link

Same control tokens as Input and Select. Target data-invalid, data-popup-open and data-placeholder on the trigger.

Do / Don'tCopy Anchor Link

• Do label every picker (FieldLabel or aria-label).
• Don't parse the trigger text; read the value from onValueChange.

RelatedCopy Anchor Link

• Calendar
• Popover
• Field

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-pickers-datepicker--docs