DateTimePicker Input

A customizable date and time picker input component for shadcn/ui. Provides an intuitive interface for selecting dates and times.

Selected Date: 2025-10-30 14:20

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

Installation

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

Usage

Import the component

import { DateTimePickerInput } from '@/components/ui/datetimepicker-input';

Basic Usage

const DateTimePickerInputDemo = () => {
    return (
        <DateTimePickerInput
            mode="single"
            value={new Date()}
            onValueChange={(date) => {
                console.log(date);
            }}
            placeholder="Select date"
        />
    );
};

With Range Mode

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

With Time Mode

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"
        />
    );
};

DateTimePicker Input

Selected Date: 2025-10-30 14:20

Installation

Usage

Import the component

Basic Usage

With Range Mode

With Time Mode

On this page