Qwik time-picker - Flowbite

Use the timepicker component to select a time by selecting the hour, minute, and second values using Qwik and Tailwind CSS

Follow the examples below to see how you can use the Timepicker component by importing it from the Flowbite Qwik library, customize the suffix and behaviour of the component by overriding the default theme variables and using the props from Qwik.

To start using the timepicker component you need to import it from the flowbite-qwik package :

import { TimePicker } from "flowbite-qwik"

Default Timepicker

Use this example to show a simple timepicker component.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { TimePicker } from 'flowbite-qwik'

export default component$(() => {
  const time = useSignal<string>()

  return (
    <>
      <p class="mb-2">Reactive time : {time.value}</p>
      <div class="w-[110px]">
        <TimePicker bind:value={time} />
      </div>
    </>
  )
})

Timepicker with a suffix icon

Use this example to show a simple timepicker component with suffix and default value.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { TimePicker } from 'flowbite-qwik'
import { IconClockOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <div class="w-[110px]">
      <TimePicker
        label="Time picker"
        onTimeChange$={(timeAsString, timeAsChunk) => {
          console.log({ timeAsString, timeAsChunk })
        }}
        suffix={<IconClockOutline class="h-4 w-4" />}
        value="13:30"
      />
    </div>
  )
})

Timepicker with pattern hh:mm:ss

Use this example to show a simple timepicker component with pattern hh:mm:ss and default value.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { TimePicker } from 'flowbite-qwik'
import { IconClockOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  const chunks = useSignal<string[]>()

  return (
    <div class="flex w-[150px] flex-col gap-3">
      <label>Chunks : {JSON.stringify(chunks.value)}</label>
      <TimePicker
        onTimeChange$={(timeAsString, timeAsChunk) => {
          console.log({ timeAsString, timeAsChunk })
          chunks.value = timeAsChunk
        }}
        suffix={<IconClockOutline class="h-4 w-4" />}
        value="13:30:15"
      />
    </div>
  )
})