Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Locale The whole panel, not only the clock — fifteen languages ship with the package.

Hour Cycle

Panel A list of times, or hour and minute columns.

Step Minutes between the times offered.

Seconds

Typing Type “7pm” or “19:30” into the field.

Footer

Close On Select

import { createTimePicker } from '@devix-labs/time-picker';
import '@devix-labs/time-picker/styles.css';

createTimePicker(document.querySelector('#target'), {
  locale: 'en-GB',
  hourCycle: 'h12',
  panel: 'list',
  step: 15,
  seconds: false,
  typing: true,
  footer: true,
  closeOnSelect: true
});

import { TimePicker } from '@devix-labs/time-picker/react';
import '@devix-labs/time-picker/styles.css';

<TimePicker
  locale="en-GB"
  hourCycle="h12"
  panel="list"
  step={15}
  typing
  footer
  closeOnSelect
/>

<script setup>
import { TimePicker } from '@devix-labs/time-picker/vue';
import '@devix-labs/time-picker/styles.css';
</script>

<template>
  <TimePicker
  locale="en-GB"
  hour-cycle="h12"
  panel="list"
  :step="15"
  typing
  footer
  close-on-select
/>
</template>

<script>
  import { timePicker } from '@devix-labs/time-picker/svelte';
  import '@devix-labs/time-picker/styles.css';
</script>

<div use:timePicker={{
  locale: 'en-GB',
  hourCycle: 'h12',
  panel: 'list',
  step: 15,
  seconds: false,
  typing: true,
  footer: true,
  closeOnSelect: true
}} />

Every option here is in the documentation, along with the ones that are not worth a control.