Openstatus
www.openstatus.dev
1// CREDITS: https://gist.github.com/fernandops26/da681c4b12e52191803b4fcb040cdebb
2"use client";
3
4import { DateTime } from "luxon";
5import * as React from "react";
6import type { SelectSingleEventHandler } from "react-day-picker";
7
8import { Calendar } from "../components/calendar";
9import { Input } from "../components/input";
10import { Label } from "../components/label";
11
12interface DateTimePickerProps {
13 date: Date;
14 setDate: (date: Date) => void;
15 className?: string;
16}
17
18export function DateTimePicker({
19 date,
20 setDate,
21 className,
22}: DateTimePickerProps) {
23 const [selectedDateTime, setSelectedDateTime] = React.useState<DateTime>(
24 DateTime.fromJSDate(date),
25 );
26
27 const handleSelect: SelectSingleEventHandler = (_day, selected) => {
28 const selectedDay = DateTime.fromJSDate(selected);
29 const modifiedDay = selectedDay.set({
30 hour: selectedDateTime.hour,
31 minute: selectedDateTime.minute,
32 });
33
34 setSelectedDateTime(modifiedDay);
35 setDate(modifiedDay.toJSDate());
36 };
37
38 const handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
39 const { value } = e.target;
40 const hours = Number.parseInt(value.split(":")[0] || "00", 10);
41 const minutes = Number.parseInt(value.split(":")[1] || "00", 10);
42 const modifiedDay = selectedDateTime.set({ hour: hours, minute: minutes });
43
44 setSelectedDateTime(modifiedDay);
45 setDate(modifiedDay.toJSDate());
46 };
47
48 return (
49 <div className={className}>
50 <Calendar
51 mode="single"
52 selected={selectedDateTime.toJSDate()}
53 onSelect={handleSelect}
54 initialFocus
55 />
56 <div className="px-4 pb-4 pt-0">
57 <Label>Time</Label>
58 {/* TODO: style it properly! */}
59 <Input
60 type="time"
61 onChange={handleTimeChange}
62 value={selectedDateTime.toFormat("HH:mm")}
63 />
64 </div>
65 {!selectedDateTime && <p>Please pick a day.</p>}
66 </div>
67 );
68}