TimeSelect

Used for selecting or entering a fixed point in time, suitable for appointment, scheduling, and business hour scenarios.

TimePicker vs TimeSelect

• TimePicker: Free selection of any time point via spinner panels.
• TimeSelect: Selection from a predefined list of fixed time slots (this component), ideal for appointments, shifts, or business hours.

Basic Usage

The most fundamental time selector. You can customize the start time, end time, and step size.

Current value: Not selected

Basic Usage

Disabled State

Use the disabled property to disable the entire time selector.

09:00

Disabled State

Clearable

Set the clearable property to allow clearing the selected time.

10:30

Current value: 10:30

Clearable

Time Range Selection

Achieve time range linkage with min-time and max-time. The max-time of the start selector binds to the end value, and the min-time of the end selector binds to the start value.

to

Selected range: -- to --

Time Range Selection

Fixed Time Range

Set the time range and intervals using start, end, and step.

Treatment time: 09:00 - 21:00, 30-min slots

Fixed Time Range

Disabled Time Slots

Use the disabled-hours property to disable specific time ranges, such as lunch breaks or meal times.

Disabled: 12:00-13:30 (Lunch), 18:00-19:00 (Dinner)

Disabled Time Slots

minTime and maxTime Constraints

Use min-time and max-time to restrict the selectable range. Options outside this range will be disabled.

Selectable range: 09:00 - 18:00

minTime and maxTime Constraints

Different Sizes

Use the size property to change the picker's dimensions. Options: large, default, small.

Different Sizes

Time Format

Customize the time display format using the format property.

Current value: Not selected

Time Format

Custom Time Options

Use the options property to provide a custom list of time slots, which takes precedence over start/end/step configurations.

Current value: Not selected

Custom Time Options

Full Feature Demo

Showing searchability, clearability, and custom time intervals.

Current selection: Not selected

Full Feature Demo

Usage in Nuxt

The TimeSelect component fully supports SSR in Nuxt 3/4. When used in a Nuxt project, it is auto-imported.

Usage in Nuxt

SSR Considerations:

• ✅ Time option lists and initial values are fully supported.
• ✅ Formatting (format) renders correctly on the server.
• ✅ Disabled slots and range limits are supported during SSR.
• ✅ Dropdown lists use Teleport but remain SSR-compatible for the initial load.
• ⚠️ Scroll positioning and search matching become active after client-side hydration.

SSR Safety

TimeSelect's list of options is pre-generated on the server based on start/end/step parameters, ensuring the dropdown is fully populated on initial load, providing excellent SEO and interaction.

API

Props

Name	Description	Type	Default
model-value / v-model	Binding value	string	—
disabled	Whether to disable the picker	boolean	false
editable	Whether the input is editable (searchable)	boolean	true
clearable	Whether the value can be cleared	boolean	true
size	Input box size	'large' | 'default' | 'small'	'default'
placeholder	Placeholder text	string	'Select time'
name	Native name attribute	string	—
effect	Dropdown theme	'dark' | 'light'	'light'
prefix-icon	Prefix icon	string | Component	Clock icon
clear-icon	Clear icon	string | Component	Close circle icon
start	Start time	string	'09:00'
end	End time	string	'18:00'
step	Time interval	string	'00:30'
min-time	Minimum selectable time	string	—
max-time	Maximum selectable time	string	—
value-on-clear	Value returned on clear	string	undefined
format	Display format	string	'HH:mm'
popper-class	Dropdown class name	string	—
popper-style	Dropdown custom styles	string | object	—
teleported	Whether to insert the dropdown into body	boolean	true
include-end-time	Whether to include the end time in the list	boolean	false
validate-event	Whether to trigger form validation	boolean	true
options	Custom list of time options	TimeOption[]	—
disabled-hours	Disabled time spans	string[][]	—

TimeOption

Name	Description	Type	Required
value	Time value	string	✅
label	Display label	string	✅
disabled	Whether disabled	boolean	—

Events

Name	Description	Parameters
change	Triggers when the value changes	(value: string | undefined) => void
focus	Triggers on focus	(event: FocusEvent) => void
blur	Triggers on blur	(event: FocusEvent) => void
clear	Triggers when cleared	() => void
visible-change	Triggers when the dropdown shows/hides	(visible: boolean) => void

Slots

Name	Description	Parameters
prefix	Custom prefix icon	—
empty	Content when no data is available	—
option	Custom content for options	{ option: TimeOption }

Expose

Name	Description	Type
focus	Focus the component	() => void
blur	Blur the component	() => void
inputRef	Reference to the native input element	HTMLInputElement | undefined

Theme Variables

Variable	Description	Default
--yh-time-select-height-large	Large size height	40px
--yh-time-select-height-default	Default size height	32px
--yh-time-select-height-small	Small size height	24px
--yh-time-select-border-color	Border color	var(--yh-border-color)
--yh-time-select-border-color-hover	Hover border color	var(--yh-border-color-hover)
--yh-time-select-bg-color	Background color	var(--yh-fill-color-blank)
--yh-time-select-text-color	Text color	var(--yh-text-color-primary)
--yh-time-select-placeholder-color	Placeholder text color	var(--yh-text-color-placeholder)
--yh-time-select-disabled-bg-color	Disabled background color	var(--yh-fill-color-light)
--yh-time-select-disabled-text-color	Disabled text color	var(--yh-text-color-disabled)

Use Cases

Appointment System

<template>
  <yh-form :model="form">
    <yh-form-item label="Appointment Date">
      <yh-date-picker v-model="form.date" />
    </yh-form-item>
    <yh-form-item label="Appointment Time">
      <yh-time-select
        v-model="form.time"
        start="09:00"
        end="17:00"
        step="00:30"
        :disabled-hours="[['12:00', '13:00']]"
        placeholder="Select appointment time"
      />
    </yh-form-item>
  </yh-form>
</template>

Business Hours Setup

<template>
  <div style="display: flex; gap: 16px; align-items: center;">
    <yh-time-select
      v-model="openTime"
      :max-time="closeTime"
      start="00:00"
      end="23:59"
      step="00:30"
      placeholder="Opening time"
    />
    <span>-</span>
    <yh-time-select
      v-model="closeTime"
      :min-time="openTime"
      start="00:00"
      end="23:59"
      step="00:30"
      placeholder="Closing time"
    />
  </div>
</template>

Scheduling System

<template>
  <yh-time-select
    v-model="shiftTime"
    :options="[
      { value: '08:00', label: 'Morning Shift (08:00-16:00)' },
      { value: '16:00', label: 'Afternoon Shift (16:00-00:00)' },
      { value: '00:00', label: 'Night Shift (00:00-08:00)' }
    ]"
    placeholder="Select shift"
  />
</template>