time-picker-seconds-demo

PreviousNext
Docs
diceuiexample

Preview

Loading preview…
examples/time-picker-seconds-demo.tsx
"use client";

import {
  TimePicker,
  TimePickerContent,
  TimePickerHour,
  TimePickerInput,
  TimePickerInputGroup,
  TimePickerLabel,
  TimePickerMinute,
  TimePickerSecond,
  TimePickerSeparator,
  TimePickerTrigger,
} from "@/registry/default/ui/time-picker";

export default function TimePickerSecondsDemo() {
  return (
    <TimePicker defaultValue="14:30:45" className="w-[280px]" showSeconds>
      <TimePickerLabel>Select Time with Seconds</TimePickerLabel>
      <TimePickerInputGroup>
        <TimePickerInput segment="hour" />
        <TimePickerSeparator />
        <TimePickerInput segment="minute" />
        <TimePickerSeparator />
        <TimePickerInput segment="second" />
        <TimePickerTrigger />
      </TimePickerInputGroup>
      <TimePickerContent>
        <TimePickerHour />
        <TimePickerMinute />
        <TimePickerSecond />
      </TimePickerContent>
    </TimePicker>
  );
}

Installation

npx shadcn@latest add @diceui/time-picker-seconds-demo

Usage

import { TimePickerSecondsDemo } from "@/components/time-picker-seconds-demo"
<TimePickerSecondsDemo />