DateTimePicker

A comprehensive and customizable date and time picker component for shadcn/ui, featuring wheel pickers for a modern user experience.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Selected Date: 2025-10-30 14:20

"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 min-h-screen 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;

Installation

pnpm add shadcn@latest add @shadix-ui/datetimepicker

Usage

Import the component

import { DateTimePicker } from '@/components/datetimepicker';

Basic Usage

const DateTimePickerDemo = () => {
    return (
        <DateTimePicker
            mode="single"
            value={new Date()}
            onDateChange={(date) => {
                console.log(date);
            }}
            placeholder="Select date"
        />
    );
};

With Range Mode

const DateTimePickerDemo = () => {
    return (
        <DateTimePicker
            mode="range"
            onDateChange={(date) => {
                console.log(date);
            }}
            placeholder="Select date range"
        />
    );
};

With Time Mode

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

Selected Date: 2025-10-30 14:20

Installation

Usage

Import the component

Basic Usage

With Range Mode

With Time Mode

On this page