Update input components

src/routes/input/index.tsx

@@ -2,6 +2,7 @@ import { MattrixwvTabGroup } from "$/component/tab";
 import type { TabGroupContent } from "$/types/TabTypes";
 import { CheckboxContent, DateContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 
 
 export const Route = createFileRoute('/input/')({
@@ -10,15 +11,21 @@ export const Route = createFileRoute('/input/')({
 
 
 function InputPage(){
+	const [ date, setDate ] = useState<Date>();
+	const [ dateTime, setDateTime ] = useState<Date>();
+	const [ time, setTime ] = useState<Date>();
+
+
 	const tabs: TabGroupContent[] = [
 		{ tab: "Checkbox", content: <CheckboxContent/>},
 		{ tab: "Radio", content: <RadioContent/> },
-		{ tab: "Date", content: <DateContent/> },
+		{ tab: "Date", content: <DateContent date={date} setDate={setDate} dateTime={dateTime} setDateTime={setDateTime} time={time} setTime={setTime}/> },
 		{ tab: "File", content: <FileContent/> },
 		{ tab: "Switch", content: <SwitchContent/> },
 		{ tab: "Text", content: <TextContent/> }
 	];
 
+
 	return (
 		<div
 			className="flex flex-col items-center justify-center"

src/util/InputUtils.tsx

@@ -822,16 +822,36 @@ function RadioDisplay({
 	);
 }
 
-export function DateContent(){
+export function DateContent({
+	date,
+	setDate,
+	dateTime,
+	setDateTime,
+	time,
+	setTime
+}:Readonly<{
+	date: Date | undefined;
+	setDate: (newDate: Date | undefined) => void;
+	dateTime: Date | undefined;
+	setDateTime: (newDateTime: Date | undefined) => void;
+	time: Date | undefined;
+	setTime: (newTime: Date | undefined) => void;
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center my-8 gap-y-8"
 		>
 			<DateInput
+				onChange={setDate}
+				value={date}
 			/>
 			<DateTimeInput
+				onChange={setDateTime}
+				value={dateTime}
 			/>
 			<TimeInput
+				onChange={setTime}
+				value={time}
 			/>
 		</div>
 	);