DÁP Szolgáltatások

Timepicker

The Timepicker component is a form element that allows users to select a time from a time picker interface. It is used to input a time in a user-friendly way.

Design system docs

Examples

Default Timepicker

The default Timepicker is a form element with a label, placeholder, and description. It provides an intuitive interface for time selection.

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-timepicker 
  label="Meeting time"
  description="Choose the meeting start time"
>
</dap-ds-timepicker>
</div>

Sizes

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-stack>
<dap-ds-timepicker 
  size="xs"
  label="Meeting time"
  feedback="This is a feedback message"
  feedbacktype="negative"
  description="Choose the meeting start time"
>
</dap-ds-timepicker>
<dap-ds-timepicker 
  size="sm"
  label="Meeting time"
  feedback="This is a feedback message"
  feedbacktype="negative"
  description="Choose the meeting start time"
>
</dap-ds-timepicker>
<dap-ds-timepicker 
  size="lg"
  label="Meeting time"
  feedback="This is a feedback message"
  feedbacktype="negative"
  description="Choose the meeting start time"
>
</dap-ds-timepicker>
</dap-ds-stack>
</div>

Validation

The timepicker will emit a dds-valid-time custom event if the input is a valid time, and a dds-invalid-time custom event if the input is not a valid time. You can listen for these events to validate the input, and check the error type with the type property of the event detail.

HTML

timepicker.addEventListener('dds-valid-time', e => {
  console.log('Valid Value:', e.detail)
  timepicker.feedback = 'valid'
  timepicker.status = 'valid'
  timepicker.feedbackType = 'positive'
})

timepicker.addEventListener('dds-invalid-time', e => {
  console.log('dds-invalid-time', event.detail.value)

  timepicker2.status = 'error'
  timepicker2.feedbackType = 'negative'

  if(event.detail.type === 'invalid') {
    timepicker2.feedback = 'Invalid time'
  }

  if(event.detail.type === 'out-of-range') {
    timepicker2.feedback = 'Time is out of range'
  }
})

timepicker.addEventListener('dds-change', e => {
  console.log('Value:', e.detail)
})

React

import { DapDSButtonReact, DapDSTimePickerReact } from 'dap-design-system/dist/react'
import { Controller, useForm } from 'react-hook-form';

function App() {
  const {
    control,
    handleSubmit,
    setValue,
    setError,
    formState: { errors },
  } = useForm()

  const onSubmit = (data: any) => {
    console.log('data', data)
  }
  
  return (
    <div className="App">
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <Controller
        name="timepicker"
        control={control}
        render={({ field: { value } }) => (
          <DapDSTimePickerReact
            id="timepicker"
            label="Meeting time"
            description="Choose the meeting start time"
            required
            name="timepicker"
            value={value}
            feedback={errors?.timepicker?.message?.toString()}
            feedbackType={errors?.timepicker ? 'negative' : 'positive'}
            onDdsChange={(e) => {
              console.log(e)
              setValue('timepicker', e.detail.value, { shouldValidate: true })}
            }
            onDdsInvalidTime={(e) => {
              console.log(e)
              if (e.detail.type === 'invalid') {
                setError('timepicker', { message: 'Invalid time format' })
              }

              if (e.detail.type === 'out-of-range') {
                setError('timepicker', { message: 'Time out of range' })
              }
            }}
            onDdsValidTime={(e) => {
              console.log(e)
              setError('timepicker', { message: '' })
            }}
          >
          </DapDSTimePickerReact>
        )}
        rules={{
          validate: {
            required: value => {
              if (!value) return '*Required'
            },
          },
        }}
      />
      <DapDSButtonReact htmlType="submit">Submit</DapDSButtonReact>
    </form>
    </div>
  );
}

export default App;

Localization

The locale property can be used to set the locale of the timepicker. The default locale is the current locale of the browser. The available locales are en and hu.

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-stack>
  <dap-ds-timepicker 
    locale="hu"
    label="Találkozó időpontja"
    feedback="Érvénytelen időpont"
    feedbacktype="negative"
    description="Válassz találkozó időpontot"
  >
  </dap-ds-timepicker>
  <dap-ds-timepicker 
    locale="en"
    label="Meeting time"
    feedback="Invalid time"
    feedbacktype="negative"
    description="Choose the meeting start time"
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Time Format

The timepicker supports various time formats. You can set a custom time format with the format attribute. The format attribute accepts a string separated with '|' character, or you can set the separator character with the formatSeparator attribute.

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-stack>
  <dap-ds-timepicker 
    format="HH:mm"
    label="24-hour format"
    description="Time in 24-hour format"
  >
  </dap-ds-timepicker>
  <dap-ds-timepicker 
    format="hh:mm A"
    label="12-hour format"
    description="Time in 12-hour format with AM/PM"
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Time Range

You can set minimum and maximum time constraints using the min and max attributes to restrict the time selection within a specific range.

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-stack>
  <dap-ds-timepicker 
    minTime="09:00"
    maxTime="17:00"
    label="Business hours"
    description="Select time between 9 AM and 5 PM"
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Step Intervals

The step attribute allows you to set the time increment for the time picker. This is useful for setting specific intervals like 15 minutes, 30 minutes, or 1 hour.

<div style={{ display: 'flex', minHeight: 200 }}>
<dap-ds-stack>
  <dap-ds-timepicker
    step="20"
    label="20-minute intervals"
    description="Time selection in 20-minute increments"
  >
  </dap-ds-timepicker>
  <dap-ds-timepicker
    step="1"
    label="1-minute intervals"
    description="Time selection in 1-minute increments"
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Seconds Support

The timepicker supports seconds selection with the showSeconds attribute. You can control the seconds increment using the secondsStep attribute. Remember to update the format attribute to include seconds (e.g., HH:mm:ss).

<div style={{ display: 'flex', minHeight: 300 }}>
<dap-ds-stack>
  <dap-ds-timepicker
    showSeconds
    secondsStep="5"
    format="HH:mm:ss"
    label="Time with seconds"
    description="5-second intervals"
    placeholder="HH:mm:ss"
  >
  </dap-ds-timepicker>
  <dap-ds-timepicker
    showSeconds
    secondsStep="1"
    format="HH:mm:ss"
    label="Time with seconds"
    description="1-second intervals"
    placeholder="HH:mm:ss"
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Time Presets

You can provide quick time selection options using the presets property. Presets appear as buttons at the top of the time picker for faster selection of common times.

<div style={{ display: 'flex', minHeight: 300 }}>
<dap-ds-timepicker
  id="preset-timepicker"
  label="Meeting time"
  description="Quick select common meeting times"
  presets={[
    { label: 'Morning', value: '09:00' },
    { label: 'Lunch', value: '12:00' },
    { label: 'Afternoon', value: '15:00' },
    { label: 'Evening', value: '18:00' }
  ]}
>
</dap-ds-timepicker>
</div>

Disabled Times

You can disable specific times using the disabledTime callback function. This is useful for restricting selection to business hours or other custom time constraints. The callback receives hour, minute, and optionally second parameters, and should return true if the time should be disabled.

<div style={{ display: 'flex', minHeight: 300 }}>
<dap-ds-stack>
  <dap-ds-timepicker
    id="business-hours"
    label="Business hours"
    description="Only 9 AM - 5 PM available"
    disabledTime={(hour, minute) => {
      return hour < 9 || hour >= 17
    }}
  >
  </dap-ds-timepicker>
  <dap-ds-timepicker
    id="hidden-disabled"
    label="Business hours (hidden)"
    description="Only shows available times"
    disabledTime = {(hour, minute) => {
      return hour < 9 || hour >= 17
    }}
    hideDisabledTimes={true}
  >
  </dap-ds-timepicker>
</dap-ds-stack>
</div>

Hide Disabled Times

When using the disabledTime callback, you can set hideDisabledTimes to true to completely hide disabled time options instead of showing them as disabled. This creates a cleaner interface when many times are unavailable.

Importing

import { DapDSTimePicker } from 'dap-design-system'

Importing React

import { DapDSTimePickerReact } from 'dap-design-system/react'

Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTimePicker } from 'dap-design-system/components'

Attributes

Property	Type	Default	Description
`minTime`	`string`	`'00:00'`	The minimum time of the timepicker. Format: 'HH:mm'.
`maxTime`	`string`	`'23:59'`	The maximum time of the timepicker. Format: 'HH:mm'.
`step`	`number`	`5`	The step interval in minutes. Defaults to 15.
`placement`	`string`	`'bottom-start'`	The placement of the dropdown of the timepicker.
`opened`	`boolean`	`false`	The open state of the timepicker.
`openTimeOnInput`	`boolean`	`false`	Whether the time picker should open on typing.
`sendEmptyEventOnInput`	`boolean`	`false`	Whether the time picker should send an empty event on typing.
`placeholder`	`string`		The placeholder of the timepicker.
`loading`	`boolean`	`false`	The loading state of the timepicker.
`format`	`string`	`'HH:mm'`	The format of the timepicker. Defaults to 'HH:mm'.
`clearButton`	`string`	`'true'`	Whether the clear button should be shown. Defaults to 'true'.
`clearButtonAriaLabel`	`string`		The aria label of the clear button.
`floatingStrategy`	`FloatingStrategy`	`'fixed'`	The floating strategy of the timepicker.
`locale`	`string`		The locale of the timepicker.
`closeOnSelection`	`boolean`	`false`	Whether the dropdown should close when a time is selected.
`showSeconds`	`boolean`	`false`	Whether to show the seconds column in the time picker.
`secondsStep`	`number`	`1`	The step interval in seconds. Defaults to 1.
`disabledTime`	`function`		Callback to determine if a time should be disabled.
`hideDisabledTimes`	`boolean`	`false`	Whether to hide disabled times or show them as disabled.
`presets`	`TimePreset[]`		Array of preset time slots for quick selection.
`value`	`Dayjs`		The value of the timepicker.
`label`	`string`		The label of the timepicker.
`description`	`string`		The description of the timepicker.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the timepicker.
`disabled`	`boolean`		The disabled state of the timepicker.
`required`	`boolean`		The required state of the timepicker.
`readonly`	`boolean`		The readonly state of the timepicker.
`autofocus`	`boolean`		The autofocus state of the timepicker.
`tooltip`	`string`		The tooltip of the timepicker.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the timepicker.
`feedback`	`string`		The feedback of the timepicker.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The feedback type of the timepicker.
`optional`	`boolean`		The optional state of the timepicker.
`optionalLabel`	`string`		The optional label of the timepicker.
`subtle`	`boolean`		The weight of the label. Default is `false`
`autocomplete`	`string`		The autocomplete of the timepicker.

Slots

No slots available.

Events

Event Name	Description	Type
`dds-change`	Fired when the timepicker value changes.	`{value: string }`
`dds-input`	Fired when the timepicker input value changes.	`{value: string }`
`dds-valid-time`	Fired when the timepicker input value is valid. Happens on manual input typing.	`{value: string }`
`dds-invalid-time`	Fired when the timepicker input value is invalid. Happens on manual input typing.	`{value: string, type: 'invalid'` , `'out-of-range' }`
`dds-clear`	Fired when the timepicker is cleared.	`{void }`
`dds-focus`	Emitted when the timepicker gains focus.	`{void }`
`dds-blur`	Emitted when the timepicker loses focus.	`{void }`

CSS Parts

Part Name	Description
`base`	The main timepicker container.
`trigger`	The trigger button of the timepicker.
`label`	The label of the timepicker.
`description`	The description of the timepicker.
`feedback`	The feedback of the timepicker.
`tooltip`	The tooltip of the timepicker.
`input`	The input of the timepicker.
`clear-button`	The clear button of the timepicker.

How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-timepicker::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-timepicker::part(base),
.my-custom-dap-ds-timepicker::part(trigger) {
  /* Shared styles */
}

Example usage:

<dap-ds-timepicker class="my-custom-dap-ds-timepicker">
  Timepicker
</dap-ds-timepicker>

.my-custom-dap-ds-timepicker::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

CSS Custom Properties

Property Name	Description
`--dds-timepicker-background`	The background color of the timepicker. Defaults to var(--dds-fields-background-default).
`--dds-timepicker-border-color`	The border color of the timepicker. Defaults to var(--dds-border-neutral-base).
`--dds-timepicker-border-width`	The border width of the timepicker. Defaults to var(--dds-border-width-base, 1px).
`--dds-timepicker-border-radius`	The border radius of the timepicker. Defaults to var(--dds-radius-base).
`--dds-timepicker-text-color`	The text color of the timepicker. Defaults to var(--dds-text-neutral-base).
`--dds-timepicker-placeholder-color`	The placeholder text color. Defaults to var(--dds-text-neutral-subtle).
`--dds-timepicker-disabled-background`	The background color when disabled. Defaults to var(--dds-background-neutral-stronger).
`--dds-timepicker-disabled-text`	The text color when disabled. Defaults to var(--dds-text-neutral-disabled).
`--dds-timepicker-error-border`	The border color for error state. Defaults to var(--dds-border-negative-base).
`--dds-timepicker-success-border`	The border color for success state. Defaults to var(--dds-border-positive-base).
`--dds-timepicker-icon-color`	The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle).
`--dds-timepicker-clear-icon-color`	The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled).
`--dds-timepicker-popup-background`	The background color of the popup. Defaults to var(--dds-background-neutral-subtle).
`--dds-timepicker-popup-shadow`	The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%).
`--dds-timepicker-padding-xs`	The padding for extra small size. Defaults to var(--dds-spacing-200).
`--dds-timepicker-padding-sm`	The padding for small size. Defaults to var(--dds-spacing-200).
`--dds-timepicker-padding-lg`	The padding for large size. Defaults to var(--dds-spacing-300).
`--dds-timepicker-padding-horizontal`	The horizontal padding. Defaults to var(--dds-spacing-300).
`--dds-timepicker-padding-vertical`	The vertical padding. Defaults to var(--dds-spacing-200).
`--dds-timepicker-gap`	The gap between elements. Defaults to var(--dds-spacing-100).
`--dds-timepicker-icon-gap`	The gap between icons. Defaults to var(--dds-spacing-200).
`--dds-timepicker-action-gap`	The gap between action elements. Defaults to var(--dds-spacing-200).
`--dds-timepicker-action-padding`	The padding for action elements. Defaults to var(--dds-spacing-300).
`--dds-timepicker-clear-icon-width`	The width of the clear icon. Defaults to var(--dds-spacing-800).
`--dds-timepicker-dropdown-icon-right`	The right position of the dropdown icon. Defaults to var(--dds-spacing-600).
`--dds-timepicker-min-width`	The minimum width of the timepicker. Defaults to 7.5rem.

How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-timepicker
  style="--dds-timepicker-background: value; --dds-timepicker-border-color: value;">
  Timepicker
</dap-ds-timepicker>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-timepicker {
  --dds-timepicker-background: value;
  --dds-timepicker-border-color: value;
  --dds-timepicker-border-width: value;
}

<dap-ds-timepicker class="my-custom-dap-ds-timepicker">
  Timepicker
</dap-ds-timepicker>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-timepicker {
  --dds-timepicker-background: value;
  --dds-timepicker-border-color: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.

Components

Time grid

<dap-ds-time-grid/>

Attributes

Property	Type	Default	Description
`selectedHour`	`number`	`12`	The currently selected hour (0-23).
`selectedMinute`	`number`	`0`	The currently selected minute (0-59).
`selectedSecond`	`number`	`0`
`minTime`	`string`	`'00:00'`	The minimum selectable time (format: 'HH:mm').
`maxTime`	`string`	`'23:59'`	The maximum selectable time (format: 'HH:mm').
`step`	`number`	`5`	The step interval in minutes.
`locale`	`string`	`'en'`	The locale for time formatting.
`showSeconds`	`boolean`	`false`
`secondsStep`	`number`	`1`
`disabledTime`	`(
hour: number,
minute: number,
second?: number,
) => boolean `,` undefined`
`hideDisabledTimes`	`boolean`	`false`
`presets`	`TimePreset[]`, `undefined`

Slots

No slots available.

Events

Event Name	Description	Type
`dds-change`	Fired when time selection changes.	`{detail: TimeSelection }`
`dds-close`	Fired when the time grid should close.	`{void }`

CSS Parts

Part Name	Description
`time-grid`	The main time grid container.
`hour-section`	The hour selection section.
`minute-section`	The minute selection section.
`time-button`	Individual time selection buttons.
`section-header-title`	The title of the section header.
`section-header-divider`	The divider between the section header and the time buttons.
`time-column`	The time column container.

CSS Custom Properties

Property Name	Description
`--dds-time-grid-gap`	The gap between time sections (default: var(--dds-spacing-400)).
`--dds-time-grid-padding`	The padding around the time grid (default: var(--dds-spacing-0)).
`--dds-time-grid-column-gap`	The gap between time buttons in columns (default: var(--dds-spacing-200)).
`--dds-time-grid-border-radius`	The border radius of the time grid (default: var(--dds-radius-base)).
`--dds-time-grid-background`	The background color of the time grid (default: var(--dds-background-neutral-subtle)).
`--dds-time-grid-transition`	The transition timing for the time grid (default: all 0.2s ease-in-out).
`--dds-time-grid-max-width`	The maximum width of the time grid (default: 400px).
`--dds-time-grid-column-max-height`	The maximum height of time columns (default: 240px).

timepicker.addEventListener('dds-valid-time', e => { console.log('Valid Value:', e.detail) timepicker.feedback = 'valid' timepicker.status = 'valid' timepicker.feedbackType = 'positive' }) timepicker.addEventListener('dds-invalid-time', e => { console.log('dds-invalid-time', event.detail.value) timepicker2.status = 'error' timepicker2.feedbackType = 'negative' if(event.detail.type === 'invalid') { timepicker2.feedback = 'Invalid time' } if(event.detail.type === 'out-of-range') { timepicker2.feedback = 'Time is out of range' } }) timepicker.addEventListener('dds-change', e => { console.log('Value:', e.detail) })

import { DapDSButtonReact, DapDSTimePickerReact } from 'dap-design-system/dist/react' import { Controller, useForm } from 'react-hook-form'; function App() { const { control, handleSubmit, setValue, setError, formState: { errors }, } = useForm() const onSubmit = (data: any) => { console.log('data', data) } return ( <div className="App"> <form onSubmit={handleSubmit(onSubmit)} noValidate> <Controller name="timepicker" control={control} render={({ field: { value } }) => ( <DapDSTimePickerReact id="timepicker" label="Meeting time" description="Choose the meeting start time" required name="timepicker" value={value} feedback={errors?.timepicker?.message?.toString()} feedbackType={errors?.timepicker ? 'negative' : 'positive'} onDdsChange={(e) => { console.log(e) setValue('timepicker', e.detail.value, { shouldValidate: true })} } onDdsInvalidTime={(e) => { console.log(e) if (e.detail.type === 'invalid') { setError('timepicker', { message: 'Invalid time format' }) } if (e.detail.type === 'out-of-range') { setError('timepicker', { message: 'Time out of range' }) } }} onDdsValidTime={(e) => { console.log(e) setError('timepicker', { message: '' }) }} > </DapDSTimePickerReact> )} rules={{ validate: { required: value => { if (!value) return '*Required' }, }, }} /> <DapDSButtonReact htmlType="submit">Submit</DapDSButtonReact> </form> </div> ); } export default App;

<div style={{ display: 'flex', minHeight: 300 }}> <dap-ds-stack> <dap-ds-timepicker id="business-hours" label="Business hours" description="Only 9 AM - 5 PM available" disabledTime={(hour, minute) => { return hour < 9 || hour >= 17 }} > </dap-ds-timepicker> <dap-ds-timepicker id="hidden-disabled" label="Business hours (hidden)" description="Only shows available times" disabledTime = {(hour, minute) => { return hour < 9 || hour >= 17 }} hideDisabledTimes={true} > </dap-ds-timepicker> </dap-ds-stack> </div>

Property

Type

Default

Description

minTime

string

'00:00'

The minimum time of the timepicker. Format: 'HH:mm'.

maxTime

string

'23:59'

The maximum time of the timepicker. Format: 'HH:mm'.

step

number

5

The step interval in minutes. Defaults to 15.

placement

string

'bottom-start'

The placement of the dropdown of the timepicker.

opened

boolean

false

The open state of the timepicker.

openTimeOnInput

boolean

false

Whether the time picker should open on typing.

sendEmptyEventOnInput

boolean

false

Whether the time picker should send an empty event on typing.

placeholder

string

The placeholder of the timepicker.

loading

boolean

false

The loading state of the timepicker.

format

string

'HH:mm'

The format of the timepicker. Defaults to 'HH:mm'.

clearButton

string

'true'

Whether the clear button should be shown. Defaults to 'true'.

clearButtonAriaLabel

string

The aria label of the clear button.

floatingStrategy

FloatingStrategy

'fixed'

The floating strategy of the timepicker.

locale

string

The locale of the timepicker.

closeOnSelection

boolean

false

Whether the dropdown should close when a time is selected.

showSeconds

boolean

false

Whether to show the seconds column in the time picker.

secondsStep

number

1

The step interval in seconds. Defaults to 1.

disabledTime

function

Callback to determine if a time should be disabled.

hideDisabledTimes

boolean

false

Whether to hide disabled times or show them as disabled.

presets

TimePreset[]

Array of preset time slots for quick selection.

value

Dayjs

The value of the timepicker.

label

string

The label of the timepicker.

description

string

The description of the timepicker.

size

'xs', 'sm' , 'lg'

The size of the timepicker.

disabled

boolean

The disabled state of the timepicker.

required

boolean

The required state of the timepicker.

readonly

boolean

The readonly state of the timepicker.

autofocus

boolean

The autofocus state of the timepicker.

tooltip

string

The tooltip of the timepicker.

tooltipPlacement

'top', 'right' , 'bottom' , 'left'

The tooltip placement of the timepicker.

feedback

string

The feedback of the timepicker.

feedbackType

'negative', 'positive' , 'warning'

The feedback type of the timepicker.

optional

boolean

The optional state of the timepicker.

optionalLabel

string

The optional label of the timepicker.

subtle

boolean

The weight of the label. Default is false

autocomplete

string

The autocomplete of the timepicker.

Event Name

Description

Type

dds-change

Fired when the timepicker value changes.

{value: string }

dds-input

Fired when the timepicker input value changes.

{value: string }

dds-valid-time

Fired when the timepicker input value is valid. Happens on manual input typing.

{value: string }

dds-invalid-time

Fired when the timepicker input value is invalid. Happens on manual input typing.

{value: string, type: 'invalid' , 'out-of-range' }

dds-clear

Fired when the timepicker is cleared.

{void }

dds-focus

Emitted when the timepicker gains focus.

{void }

dds-blur

Emitted when the timepicker loses focus.

{void }

Part Name

Description

base

The main timepicker container.

trigger

The trigger button of the timepicker.

label

The label of the timepicker.

description

The description of the timepicker.

feedback

The feedback of the timepicker.

tooltip

The tooltip of the timepicker.

input

The input of the timepicker.

clear-button

The clear button of the timepicker.

/* Target a specific part */ .my-custom-dap-ds-timepicker::part(base) { /* Your custom styles */ } /* Target multiple parts */ .my-custom-dap-ds-timepicker::part(base), .my-custom-dap-ds-timepicker::part(trigger) { /* Shared styles */ }

Property Name

Description

--dds-timepicker-background

The background color of the timepicker. Defaults to var(--dds-fields-background-default).

--dds-timepicker-border-color

The border color of the timepicker. Defaults to var(--dds-border-neutral-base).

--dds-timepicker-border-width

The border width of the timepicker. Defaults to var(--dds-border-width-base, 1px).

--dds-timepicker-border-radius

The border radius of the timepicker. Defaults to var(--dds-radius-base).

--dds-timepicker-text-color

The text color of the timepicker. Defaults to var(--dds-text-neutral-base).

--dds-timepicker-placeholder-color

The placeholder text color. Defaults to var(--dds-text-neutral-subtle).

--dds-timepicker-disabled-background

The background color when disabled. Defaults to var(--dds-background-neutral-stronger).

--dds-timepicker-disabled-text

The text color when disabled. Defaults to var(--dds-text-neutral-disabled).

--dds-timepicker-error-border

The border color for error state. Defaults to var(--dds-border-negative-base).

--dds-timepicker-success-border

The border color for success state. Defaults to var(--dds-border-positive-base).

--dds-timepicker-icon-color

The color of the icons. Defaults to var(--dds-text-icon-neutral-subtle).

--dds-timepicker-clear-icon-color

The color of the clear icon. Defaults to var(--dds-button-subtle-icon-neutral-enabled).

--dds-timepicker-popup-background

The background color of the popup. Defaults to var(--dds-background-neutral-subtle).

--dds-timepicker-popup-shadow

The box shadow of the popup. Defaults to 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%).

--dds-timepicker-padding-xs

The padding for extra small size. Defaults to var(--dds-spacing-200).

--dds-timepicker-padding-sm

The padding for small size. Defaults to var(--dds-spacing-200).

--dds-timepicker-padding-lg

The padding for large size. Defaults to var(--dds-spacing-300).

--dds-timepicker-padding-horizontal

The horizontal padding. Defaults to var(--dds-spacing-300).

--dds-timepicker-padding-vertical

The vertical padding. Defaults to var(--dds-spacing-200).

--dds-timepicker-gap

The gap between elements. Defaults to var(--dds-spacing-100).

--dds-timepicker-icon-gap

The gap between icons. Defaults to var(--dds-spacing-200).

--dds-timepicker-action-gap

The gap between action elements. Defaults to var(--dds-spacing-200).

--dds-timepicker-action-padding

The padding for action elements. Defaults to var(--dds-spacing-300).

--dds-timepicker-clear-icon-width

The width of the clear icon. Defaults to var(--dds-spacing-800).

--dds-timepicker-dropdown-icon-right

The right position of the dropdown icon. Defaults to var(--dds-spacing-600).

--dds-timepicker-min-width

The minimum width of the timepicker. Defaults to 7.5rem.

Property

Type

Default

Description

selectedHour

number

12

The currently selected hour (0-23).

selectedMinute

number

0

The currently selected minute (0-59).

selectedSecond

number

0

minTime

string

'00:00'

The minimum selectable time (format: 'HH:mm').

maxTime

string

'23:59'

The maximum selectable time (format: 'HH:mm').

step

number

5

The step interval in minutes.

locale

string

'en'

The locale for time formatting.

showSeconds

boolean

false

secondsStep

number

1

disabledTime

hour: number,

minute: number,

second?: number,

) => boolean , undefined`

hideDisabledTimes

boolean

false

presets

TimePreset[], undefined

Event Name

Description

Type

dds-change

Fired when time selection changes.

{detail: TimeSelection }

dds-close

Fired when the time grid should close.

{void }

Part Name

Description

time-grid

The main time grid container.

hour-section

The hour selection section.

minute-section

The minute selection section.

time-button

Individual time selection buttons.

section-header-title

The title of the section header.

section-header-divider

The divider between the section header and the time buttons.

time-column

The time column container.

Property Name

Description

--dds-time-grid-gap

The gap between time sections (default: var(--dds-spacing-400)).

--dds-time-grid-padding

The padding around the time grid (default: var(--dds-spacing-0)).

--dds-time-grid-column-gap

The gap between time buttons in columns (default: var(--dds-spacing-200)).

--dds-time-grid-border-radius

The border radius of the time grid (default: var(--dds-radius-base)).

--dds-time-grid-background

The background color of the time grid (default: var(--dds-background-neutral-subtle)).

--dds-time-grid-transition

The transition timing for the time grid (default: all 0.2s ease-in-out).

--dds-time-grid-max-width

The maximum width of the time grid (default: 400px).

--dds-time-grid-column-max-height

The maximum height of time columns (default: 240px).