Qwik date-picker - Flowbite

Use the datepicker component to select a date from a calendar view based on an input element by selecting the day, month, and year values using Qwik and Tailwind CSS

The Datepicker component from Flowbite Qwik is an advanced UI element that you can use to allow users to pick a date from a calendar view by selecting the day, month, and year values which then will be available in the input field and state of the component.

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

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

import { DatePicker } from "flowbite-qwik"

Default Datepicker

Use this example to show a simple datepicker component.

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

export default component$(() => {
  const date = useSignal<Date>()

  return (
    <>
      <p class="mb-2">Reactive date : {date.value?.toDateString()}</p>
      <DatePicker
        onSelectedDateChanged$={(selectedDate: Date) => {
          date.value = selectedDate
        }}
      />
    </>
  )
})

Localization

Use the language prop to set the language of the datepicker component. The labelTodayButton and labelClearButton can also be used to update the text of the buttons.

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

export default component$(() => {
  return <DatePicker language="pt-BR" labelTodayButton="Hoje" labelClearButton="Limpar" />
})

Limit the date

By using the minDate and maxDate props you can limit the date range that the user can select.

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

export default component$(() => {
  return <DatePicker minDate={new Date(2023, 0, 1)} maxDate={new Date(2023, 3, 30)} />
})

Week start

The weekStart prop can be used to set the first day of the week inside the datepicker component.

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

export default component$(() => {
  return (
    <DatePicker
      weekStart={1} // Monday
    />
  )
})

Auto hide

By setting the autoHide prop you can either enable or disable automatically hiding the datepicker component when selecting a value.

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

export default component$(() => {
  return <DatePicker autoHide={false} />
})

Title

You can use the title prop to set a title for the datepicker component.

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

export default component$(() => {
  return <DatePicker title="Flowbite Datepicker" />
})

Inline

Use the inline prop to show the datepicker component without having to click inside an input field.

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

export default component$(() => {
  return <DatePicker inline />
})

Init date

Use this example to show a simple datepicker component with a default date specified for calendar

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

export default component$(() => {
  const date = useSignal<Date>()

  const fiveDaysBefore = new Date()
  fiveDaysBefore.setDate(fiveDaysBefore.getDate() - 5)

  return (
    <>
      <p class="mb-2">Reactive date : {date.value?.toDateString()}</p>
      <DatePicker
        defaultDate={fiveDaysBefore}
        onSelectedDateChanged$={(selectedDate: Date) => {
          date.value = selectedDate
        }}
      />
    </>
  )
})