DatePicker

Preview

import DatePicker from "@repo/ui/DatePicker";

<DatePicker value={value} onChange={(value) => setValue(value)} inputProps={{ size: "md" }}/>;

Has Error

const [value, setValue] = useState<number | null>(null);
<DatePicker locale="fa" value={value} onChange={(value) => setValue(value)} inputProps={{hasError : true }}/>

Default Value

const [value, setValue] = useState<number | null>(1758573000000);
<DatePicker "fa" value={value} onChange={(value) => setValue(value)} inputProps={{hasError : true }}/>

Disable Days

const [value, setValue] = useState<number | null>(1758573000000);
<DatePicker
  locale="fa"
  value={value}
  disableDays={[
    { year: 1404, month: 7, day: 10 },
    { year: 1404, month: 7, day: 12 },
    { year: 1404, month: 7, day: 15 },
    { year: 1404, month: 7, day: 16 },
    { year: 1404, month: 7, day: 20 }
  ]}
  inputProps={{
    endAdornment: <Calendar size={18} />
  }}
  onChange={(value) => setValue(value)}
/>

Disable Rage Days

const [value, setValue] = useState<number | null>(1758573000000);
<DatePicker
  locale="fa"
  value={value}
  disabledRange={{
    start: { year: 1404, month: 7, day: 10 },
    end: { year: 1404, month: 8, day: 25 }
  }}
  onChange={(value) => setValue(value)}
/>

Installation

npx the-dig@latest add TextField,DatePicker

Props

Prop	Type	Default
value *	number | null	-
onChange *	(value: number | null) => void	-
locale	"fa" | "en"	"fa"
disableDays	Array<object>	-
disabledRange	object	-
inputProps	TextFieldProps	Document