import { AbsoluteTime } from "@gnu-taler/taler-util" import { useTranslationContext } from "@gnu-taler/web-util/browser" import { add as dateAdd, sub as dateSub, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "date-fns" import { VNode, h } from "preact" import { useState } from "preact/hooks" export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, onChange: (v: AbsoluteTime) => void }): VNode { const today = startOfDay(new Date()) const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value)) const [showingDate, setShowingDate] = useState(selected) const month = getMonth(showingDate) const year = getYear(showingDate) const start = startOfWeek(startOfMonth(showingDate)); const end = endOfWeek(endOfMonth(showingDate)); const daysInMonth = eachDayOfInterval({ start, end }); const { i18n } = useTranslationContext() const monthNames = [ i18n.str`January`, i18n.str`February`, i18n.str`March`, i18n.str`April`, i18n.str`May`, i18n.str`June`, i18n.str`July`, i18n.str`August`, i18n.str`September`, i18n.str`October`, i18n.str`November`, i18n.str`December`, ] return
{year}
{monthNames[month]}
M
T
W
T
F
S
S
{daysInMonth.map(current => ( ))}
}