Time Picker

VKTimePicker, A time picking component. Also can be used for time range.

Import

import { VKTimePicker } from "@vivakits/react-components"; 

Time Picker

The <TimePicker /> component provides a simple and intuitive time selection interface with essential props to ensure smooth integration into your application.

24 Hour Format

This example demonstrates the <TimePicker /> in 24-hour format, allowing users to select time in a military-style hour representation.

Second Field

This example demonstrates the <TimePicker /> in second field, allowing users to select second.

Reset Feature

The <TimePicker /> includes a reset feature, enabling users to clear their time selection effortlessly with a reset button.

Time Picker Error

Showcase the error state of the <TimePicker />, providing visual feedback and validation messages for incorrect or missing time input.

Custom Placeholder

Customize the placeholder text of the <TimePicker /> to guide users with specific instructions or contextual hints.

Auto Focus

The <TimePicker /> can automatically focus on the input field when rendered, enhancing user experience during form navigation.

Disabled Time Picker

Display the <TimePicker /> in a disabled state to prevent user interaction while maintaining visual clarity.

Custom Icon

Replace the default time picker icon with a custom one to align with your application's design theme.

Custom Button Label

The <TimePicker /> supports customizable button labels, allowing you to tailor the action text to match your UI requirements.

Custom style with CSS classes

Apply custom CSS classes to the <TimePicker /> for full control over its styling and alignment with your design system.

interface TimePickerClassNames {
  container: string;
  inputWrapper: string;
  input: string;
  modalWrapper: string;
  resetButton: string;
  nowButton: string;
}

Pre build Variants, Color, Size, and Radius

Showcase how the <TimePicker /> supports different variants, colors, and border radius options for enhanced styling flexibility.

Time Range Picker

The range picker feature allows users to select a start and end time, making it ideal for scheduling applications.

Time Range Picker with Error

Display validation feedback in the range picker when start or end times are incorrect or missing.

Disabled Time Range Picker

Showcase the range picker in a disabled state, restricting user interaction while preserving its visual representation.

example

Custom scrollbar

Custom Theme

full width

Types

export type TimePickerValueType = string | [string, string];
export type TimePickerBooleanType = boolean | [boolean, boolean];

API Reference