Skip to content

Date Picker

InputWeb + NativeMIT
View in Storybook

Calendar-based date picker with input field and range selection support.

bun add @otfdashkit/ui

Preview

Date Picker
Loading Storybook preview…

Code

import React, { useState } from 'react'
import { Field, DatePicker } from '@otfdashkit/ui'

function DatePickerDemo() {
  const [date, setDate] = useState<Date | undefined>()
  return (
    <div className="max-w-xs">
      <Field label="Appointment date">
        <DatePicker value={date} onChange={setDate} placeholder="Select a date" />
      </Field>
    </div>
  )
}

export function Example() {
  return (
    <DatePickerDemo />
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the DatePicker source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
classNamestring
disabledboolean
onChange(date: Date) => void
placeholderstring'Pick a date'
valueDate