Datepicker

Use the Datepicker component to allow users pick a single date or a date range.

#Usage

#Only date picker

import { useState } from 'react'
import { Datepicker } from '@kinsta/stratus'

export const MyComponent = () => {
  const [date, setDate] = useState<Date>(new Date(Date.now()))

  return <Datepicker currentDate={date} onDateChange={setDate} />
}
Copy

#Date and time picker

import { useState } from 'react'
import { Datepicker } from '@kinsta/stratus'

export const MyComponent = () => {
  const [date, setDate] = useState<Date>(new Date(Date.now()))

  return <Datepicker currentDate={date} onDateChange={setDate} hasTimeSelector />
}
Copy

#Only time picker

import { useState } from 'react'
import { Datepicker } from '@kinsta/stratus'

export const MyComponent = () => {
  const [date, setDate] = useState<Date>(new Date(Date.now()))

  return (
    <Datepicker
      currentDate={date}
      onDateChange={setDate}
      hasTimeSelector
      hasDateSelector={false}
    />
}
Copy

#Props

The Datepicker components interface extends the HTMLElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style). These will all be applied to the Datepicker's wrapper except for placeholder, which will change the placeholder of the Date input.

#Types

• DatepickerProps: props of the Datepicker component processed by stratus
• DatepickerInterface: DatepickerProps extended by HTMLAttributes<HTMLElement>

Read more about types here