Shadix UIDateTimePicker Input
A customizable date and time picker input component for shadcn/ui. Provides an intuitive interface for selecting dates and times.
A customizable date and time picker input component for shadcn/ui. Provides an intuitive interface for selecting dates and times.
"use client";
import { useState } from "react";
import type React from "react";
import { format } from "date-fns";
import { DateTimeInput } from "@/components/datetimepicker-input";
const DateTimePickerDemo: React.FC<DateTimePickerDemoProps> = () => {
const [singleDate, setSingleDate] = useState<Date>(new Date());
return (
<div className="flex flex-col items-center justify-center gap-6 p-4">
<DateTimeInput
mode="single"
enableTime={true}
timeFormat="24h"
value={singleDate}
onValueChange={(date) => {
setSingleDate(date as Date);
}}
placeholder="Select date and time"
/>
<h3>Selected Date: {format(singleDate, "yyyy-MM-dd HH:mm")}</h3>
</div>
);
};
interface DateTimePickerDemoProps {
[key: string]: unknown;
}
export default DateTimePickerDemo;
import { DateTimePickerInput } from '@/components/ui/datetimepicker-input';const DateTimePickerInputDemo = () => {
return (
<DateTimePickerInput
mode="single"
value={new Date()}
onValueChange={(date) => {
console.log(date);
}}
placeholder="Select date"
/>
);
};const DateTimePickerDemo = () => {
return (
<DateTimePickerInput
mode="range"
onValueChange={(date) => {
console.log(date);
}}
placeholder="Select date range"
/>
);
};const DateTimePickerDemo = () => {
return (
<DateTimePickerInput
mode="single"
enableTime={true}
timeFormat="24h" // 12h or 24h
value={new Date()}
onValueChange={(date) => {
console.log(date);
}}
placeholder="Select date and time"
/>
);
};Built by Gihan (apix-js) for Shadcn at Vercel. Source code on GitHub.