Components
Loading preview...
Date Time Input Component (Day, Month, Year, Hour, Minute) just like React Aria, unfortunately, i have not yet added Localize Datetime yet. Fully integrated keyboard support
npx shadcn@latest add https://21st.dev/r/hihahihahoho/date-time-inputimport { Button } from "@/components/ui/button";
import {
DateGroup,
DateTimeInput,
DateTimeInputHandle,
} from "@/components/ui/date-time-input";
import { useRef, useState } from "react";
function DateTimeInputDemo() {
const [valueStart, setValueStart] = useState<Date>(new Date());
const [valueEnd, setValueEnd] = useState<Date>(new Date());
const DateTimeInputStartRef = useRef<DateTimeInputHandle>(null);
const DateTimeInputEndRef = useRef<DateTimeInputHandle>(null);
const handleChangeStart = (value: Date | "invalid" | undefined) => {
if (value && value !== "invalid") {
setValueStart(value);
}
};
const handleChangeEnd = (value: Date | "invalid" | undefined) => {
if (value && value !== "invalid") {
setValueEnd(value);
}
};
return (
<div className="flex flex-col space-y-1">
<div className="flex flex-wrap gap-2">
<Button
onClick={() => {
DateTimeInputStartRef.current?.focus();
}}
>
Focus Start
</Button>
<Button
onClick={() => {
DateTimeInputStartRef.current?.clear();
}}
>
Clear Start
</Button>
<Button
onClick={() => {
DateTimeInputEndRef.current?.focus();
}}
>
Focus End
</Button>
<Button
onClick={() => {
DateTimeInputEndRef.current?.clear();
}}
>
Clear End
</Button>
</div>
<div className="py-2 px-3 rounded-lg border w-full">
<DateGroup>
<div className="flex gap-2 items-center">
<DateTimeInput
granularity={"datetime"}
ref={DateTimeInputStartRef}
locale="en-GB"
onValueChange={handleChangeStart}
value={valueStart}
/>
-
<DateTimeInput
granularity={"datetime"}
ref={DateTimeInputEndRef}
locale="en-GB"
onValueChange={handleChangeEnd}
value={valueEnd}
/>
</div>
</DateGroup>
</div>
<div className="text-muted-foreground text-sm">
Start: {valueStart ? valueStart.toString() : "Invalid date"} <br />
End: {valueEnd ? valueEnd.toString() : "Invalid date"}
</div>
</div>
);
}
export { DateTimeInputDemo };