Files
clinicpro/assets/admin/components/ui/PersianDateInput.tsx
T
hamedandClaude Opus 5 f06efe26c0 fix(holidays): honest dates and reachable fields on the holidays page
The table had two date columns for one date: "تاریخ" printed the raw
1405-05-13 string in Latin digits, and the column labelled "میلادی" ran the
same day through formatDate — which returns Jalali. One date, twice, under a
label that lied. It is now a single formatted Jalali column.

The closure form used a native <input type="date">: Gregorian, an English
mm/dd/yyyy placeholder in an RTL Persian panel, and a white box in dark mode
because a native control does not follow the theme. It is the shared Persian
picker now.

That picker turned out to be a div with an onClick — no role, no tab stop, no
accessible name, and its clear button was a span. Since every page that picks
a date goes through it, it gained role/tabIndex/Enter-Space, an ariaLabel
prop, and a real button for clear. The page passes labels for the year select
and both form fields, and the global topbar search got an aria-label, which
takes the runtime accessibility probe on this page to clean.

useHolidays now returns an error, so a failed request reads as an error
instead of an empty year — previously indistinguishable.

The page had no test file; it has eight.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-02 17:25:56 +03:30

20 lines
798 B
TypeScript

import PersianDatePicker from './PersianDatePicker';
interface Props {
value: string; // YYYY-MM-DD میلادی
onChange: (v: string) => void;
placeholder?: string;
/** انتخاب سال→ماه→روز را فعال می‌کند (مناسب تاریخ تولد). */
enableYearPicker?: boolean;
/** نام دسترس‌پذیر؛ تریگر `input` نیست پس `<label htmlFor>` رویش نمی‌نشیند. */
ariaLabel?: string;
}
/**
* روکش نازک روی PersianDatePicker تا انتخاب تاریخ در همه‌ی صفحات با تقویم شمسی باشد.
* منبع واحد پیکر شمسی = PersianDatePicker/PersianCalendar.
*/
export default function PersianDateInput(props: Props) {
return <PersianDatePicker {...props} />;
}