A comprehensive and customizable date and time picker component for shadcn/ui, featuring wheel pickers for a modern user experience.
"use client";
import { useState } from "react";
import type React from "react";
import { format } from "date-fns";
import { DateTimePicker } from "@/components/datetimepicker";
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">
<DateTimePicker
mode="single"
enableTime={true}
timeFormat="24h"
value={singleDate}
onDateChange={(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 { DateTimePicker } from '@/components/datetimepicker';const DateTimePickerDemo = () => {
return (
<DateTimePicker
mode="single"
value={new Date()}
onDateChange={(date) => {
console.log(date);
}}
placeholder="Select date"
/>
);
};const DateTimePickerDemo = () => {
return (
<DateTimePicker
mode="range"
onDateChange={(date) => {
console.log(date);
}}
placeholder="Select date range"
/>
);
};const DateTimePickerDemo = () => {
return (
<DateTimePicker
mode="single"
enableTime={true}
timeFormat="24h" // 12h or 24h
value={new Date()}
onDateChange={(date) => {
console.log(date);
}}
placeholder="Select date and time"
/>
);
};DateTimePicker Input
A customizable date and time picker input component for shadcn/ui. Provides an intuitive interface for selecting dates and times.
Expandable Card
A customizable expandable card component for shadcn/ui. Reveals content with a smooth animation and includes a sleek, raised shadow effect.
Built by Gihan (apix-js) for Shadcn at Vercel. Source code on GitHub.