Date Time Range Picker

1<script setup lang="ts">
2import { ref, watch, useId, useTemplateRef } from "vue";
3import { Input } from "@/components/ui/input";
4import { cn } from "@/lib/utils";
5import type { DateParts } from "./types";
6import { GetI18nText, type Locale } from "./locales";
7 
8const inputId = useId();
9 
10const modelValue = defineModel<Date>();
11 
12const props = withDefaults(
13  defineProps<{
14    disabled?: boolean;
15    class?: string;
16    locale?: Locale;
17  }>(),
18  {
19    disabled: false,
20  }
21);
22 
23const $t = (key: Parameters<typeof GetI18nText>[0]) =>
24  GetI18nText(key, props.locale || "en");
25 
26const monthRef = useTemplateRef<HTMLInputElement>("monthRef");
27const dayRef = useTemplateRef<HTMLInputElement>("dayRef");
28const yearRef = useTemplateRef<HTMLInputElement>("yearRef");
29 
30const date = ref<DateParts>({
31  day: 1,
32  month: 1,
33  year: new Date().getFullYear(),
34});
35 
36const initialDate = ref<DateParts>({ ...date.value });
37 
38const syncFromValue = () => {
39  const d = modelValue.value ? new Date(modelValue.value) : new Date();
40  date.value = {
41    day: d.getDate(),
42    month: d.getMonth() + 1,
43    year: d.getFullYear(),
44  };
45  initialDate.value = { ...date.value };
46};
47 
48watch(() => modelValue.value, syncFromValue, { immediate: true });
49 
50const validateDate = (field: keyof DateParts, value: number): boolean => {
51  if (
52    (field === "day" && (value < 1 || value > 31)) ||
53    (field === "month" && (value < 1 || value > 12)) ||
54    (field === "year" && (value < 1000 || value > 9999))
55  ) {
56    return false;
57  }
58 
59  const newDate = { ...date.value, [field]: value };
60  const d = new Date(newDate.year, newDate.month - 1, newDate.day);
61  return (
62    d.getFullYear() === newDate.year &&
63    d.getMonth() + 1 === newDate.month &&
64    d.getDate() === newDate.day
65  );
66};
67 
68const handleInputChange = (field: keyof DateParts, value: string | number) => {
69  if (props.disabled) return;
70 
71  const stringValue = String(value);
72  const newValue = stringValue ? Number(stringValue) : "";
73  const isValid = typeof newValue === "number" && validateDate(field, newValue);
74 
75  date.value = { ...date.value, [field]: newValue };
76 
77  if (isValid) {
78    modelValue.value = new Date(
79      date.value.year,
80      date.value.month - 1,
81      date.value.day
82    );
83  }
84};
85 
86const handleBlur = (field: keyof DateParts, e: FocusEvent) => {
87  if (props.disabled) return;
88 
89  const target = e.target as HTMLInputElement;
90  if (!target.value) {
91    date.value = { ...initialDate.value };
92    return;
93  }
94 
95  const newValue = Number(target.value);
96// … truncated