UNPKG

724 BTypeScriptView Raw
1import React, { useState } from "react";
2
3import { format } from "date-fns";
4import { DayPicker } from "react-day-picker";
5
6export function AccessibleDatePicker() {
7 const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
8 return (
9 <DayPicker
10 mode="single"
11 onSelect={setMeetingDate}
12 selected={meetingDate}
13 labels={{
14 labelDayButton: (date, modifiers) => {
15 return modifiers.selected
16 ? `Selected Meeting Date: ${format(date, "PPP")}`
17 : "";
18 }
19 }}
20 footer={
21 meetingDate
22 ? `Meeting date is set to ${format(meetingDate, "PPPP")}`
23 : "Please pick a date for the meeting."
24 }
25 />
26 );
27}