rhf-datetime-field

1'use client';
2 
3import type { Lens } from '@hookform/lenses';
4import type { Locale } from 'date-fns';
5import { format, setHours, setMinutes } from 'date-fns';
6import { CalendarIcon } from 'lucide-react';
7import * as React from 'react';
8import { useController } from 'react-hook-form';
9import { Button } from '@/components/ui/button';
10import { Calendar } from '@/components/ui/calendar';
11import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';
12import { InputGroup, InputGroupInput } from '@/components/ui/input-group';
13import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
14import { cn } from '@/lib/utils';
15 
16export interface DatetimeFieldProps {
17  lens: Lens<Date>;
18  label?: string;
19  description?: string;
20  placeholder?: string;
21  minDate?: Date;
22  maxDate?: Date;
23  locale?: Locale;
24  disabled?: boolean;
25  step?: number;
26}
27 
28const pad2 = (n: number): string => n.toString().padStart(2, '0');
29 
30const toTimeInputValue = (date: Date | undefined): string =>
31  date ? `${pad2(date.getHours())}:${pad2(date.getMinutes())}` : '';
32 
33export function DatetimeField({
34  lens,
35  label,
36  description,
37  placeholder = 'Pick a date & time',
38  minDate,
39  maxDate,
40  locale,
41  disabled,
42  step = 60,
43}: DatetimeFieldProps) {
44  const { field, fieldState } = useController(lens.interop());
45  const [open, setOpen] = React.useState(false);
46 
47  const value = field.value as Date | undefined;
48 
49  const handleDateSelect = (next: Date | undefined) => {
50    if (!next) {
51      field.onChange(undefined);
52      return;
53    }
54    const hours = value?.getHours() ?? 0;
55    const minutes = value?.getMinutes() ?? 0;
56    field.onChange(setMinutes(setHours(next, hours), minutes));
57  };
58 
59  const handleTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
60    if (!value) return;
61    const raw = event.target.value;
62    if (!raw) return;
63    const [h, m] = raw.split(':').map((part) => Number.parseInt(part, 10));
64    if (Number.isNaN(h) || Number.isNaN(m)) return;
65    field.onChange(setMinutes(setHours(value, h), m));
66  };
67 
68  const triggerLabel = value ? format(value, 'PPp', locale ? { locale } : undefined) : placeholder;
69 
70  return (
71    <Field className='gap-2' data-invalid={fieldState.invalid}>
72      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}
73      <Popover open={open} onOpenChange={setOpen}>
74        <PopoverTrigger asChild>
75          <Button
76            id={field.name}
77            type='button'
78// … truncated