Time Picker

A time selection component with separate hour, minute, and optional second inputs. Used by RenderFormFields for ColumnTypeEnum.TIME fields.

Import


import { TimePicker } from "@phpcreation/frontend-components-react-nextjs-bundle/components/TimePicker";

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Controlled time value (`HH:mm:ss`)
`onChange`	`(value: string) => void`	—	Change handler
`showSeconds`	`boolean`	`false`	Show seconds input
`disabled`	`boolean`	`false`	Disable the input
`className`	`string`	—	Additional CSS classes

Usage


import { TimePicker } from "...";
 
<TimePicker
  value={startTime}
  onChange={setStartTime}
  showSeconds={false}
/>

With React Hook Form


<FormField
  control={form.control}
  name="startTime"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Start Time</FormLabel>
      <FormControl>
        <TimePicker
          value={field.value}
          onChange={field.onChange}
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

Calendar Input — date input with calendar
Form (RHF)
Render Form Fields

Time Picker

Import

Props

Usage

With React Hook Form

Related