File size: 1,099 Bytes
cf86710 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import { format } from "date-fns";
import React from "react";
import {
DayPicker,
type MonthCaptionProps,
useDayPicker,
} from "react-day-picker";
function CustomMonthCaption(props: MonthCaptionProps) {
const { goToMonth, nextMonth, previousMonth } = useDayPicker();
return (
<>
<h2>{format(props.calendarMonth.date, "MMM yyy")}</h2>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<button
type="button"
style={{ all: "revert", cursor: "pointer" }}
disabled={!previousMonth}
onClick={() => previousMonth && goToMonth(previousMonth)}
>
Previous
</button>
<button
type="button"
style={{ all: "revert", cursor: "pointer" }}
disabled={!nextMonth}
onClick={() => nextMonth && goToMonth(nextMonth)}
>
Next
</button>
</div>
</>
);
}
export function CustomCaption() {
return (
<DayPicker
hideNavigation
components={{
MonthCaption: CustomMonthCaption,
}}
/>
);
}
|