DatePicker
თარიღის არჩევის ველი Popover-ით და Calendar-ით. არჩევანი ფორმატირდება მიმდინარე ka/en/ru ლოკალით.
მაგალითი
<DatePicker value={arrival} onValueChange={setArrival} aria-label="ჩამოსვლა" />
<DatePicker mode="range" value={stay} onValueChange={setStay} aria-label="დარჩენის პერიოდი" />ინსტალაცია
pnpm add @llc-conciergia/uiimport * as Component from "@llc-conciergia/ui/date-picker";npx @llc-conciergia/cli add date-pickernpx shadcn@latest add https://ui.conciergia.co/r/date-picker.jsonშენიშვნები
გარე იარლიყისთვის გამოიყენეთ aria-label ან aria-labelledby — კომპონენტი მას ხილულ თარიღს უმატებს. გახსნისას ფოკუსი გადადის კალენდრის დღეზე. single არჩევისას ან range-ის დასრულებისას პოპოვერი იხურება და ფოკუსი ტრიგერზე ბრუნდება. ფორმასთან დასაკავშირებლად გამოიყენეთ FormField-ის value, onChange და onBlur. ღილაკი თარიღს native form submission-ში არ აგზავნის; გამოიყენეთ onValueChange ან react-hook-form.Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| mode | "single" | "range" | single | თარიღის ან პერიოდის არჩევა. |
| value / defaultValue | Date | DateRange | null | — | რეჟიმის შესაბამისი კონტროლირებადი ან საწყისი მნიშვნელობა. |
| onValueChange | (value) => void | — | არჩევის ცვლილება; გასუფთავება აბრუნებს null-ს. |
| placeholder | string | — | ცარიელი ველისა და დიალოგის ტექსტი; ნაგულისხმევად ლოკალიზებულია. |
| min / max / disabledDates | Date / Date / Date[] | predicate | — | Calendar-ის დღეების შეზღუდვები. |
| defaultMonth | Date | — | კალენდრის საწყისი თვე. |
| clearable | boolean | true | არჩეული მნიშვნელობის გასუფთავების ღილაკი. |
| open / defaultOpen / onOpenChange | boolean / boolean / callback | — | პოპოვერის გახსნის კონტროლი. |
| disabled | boolean | — | კრძალავს გახსნასა და გასუფთავებას. |
| …button props | React.ComponentProps<'button'> | — | ref, id, aria-label, aria-describedby, aria-invalid, onBlur, className და ტრიგერის ატრიბუტები. |