const DefaultExample = () => {
    const [date, setDate] = React.useState()
    return (
        <Form>
            <DatePicker value={date} onChange={(v) => setDate(v)} />
        </Form>
    )
}
render (DefaultExample)

States

Default Value

const DefaultValueExample = () => {
    const [date, setDate] = React.useState(new Date())
    return (
        <Form>
            <Form.DatePicker label='Date Label' value={date} onChange={(v) => setDate(v)} />
        </Form>
    )
}
render (DefaultValueExample)
const DefaultValueExample = () => {
    const [date, setDate] = React.useState(new Date())
    return (
        <Form>
            <Form.DatePicker label='Date Label' description="Description goes here..." value={date} onChange={(v) => setDate(v)} />
        </Form>
    )
}
render (DefaultValueExample)

Label Help

Labels can have a help icon with a tooltip to provide additional context to a label.

const LabelHelp = () => {
    const [date, setDate] = React.useState()
    return (
        <Form>
            <Form.DatePicker
                label='Date Label'
                value={date}
                labelProps={{
                    help: "This is help text",
                    direction: "r"
                }}
                onChange={(v) => setDate(v)} />
        </Form>
    )
}
render (LabelHelp)

Required and Optional

A visual indicator can be applied on a Date Picker's label.

const RequiredAndOptional = () => {
    const [date1, setDate1] = React.useState()
    const [date2, setDate2] = React.useState()
    return (
        <Form>
            <Form.DatePicker
                label="Date Label"
                value={date1}
                labelProps={{
                    required: true
                }}
                onChange={(v) => setDate1(v)}
            />
            <Form.DatePicker
                label="Date Label"
                value={date2}
                labelProps={{
                    optional: true
                }}
                onChange={(v) => setDate2(v)}
            />
        </Form>
    )
}
render (RequiredAndOptional)

With Placeholder

const WithPlaceholder = () => {
    const [date, setDate] = React.useState()
    return (
        <Form>
            <Form.DatePicker label='Date Label' value={date} placeholder="mm/dd/yy" onChange={(v) => setDate(v)} />
        </Form>
    )
}
render (WithPlaceholder)

Disabled

const Disabled = () => {
    const [date, setDate] = React.useState(new Date())
    return (
        <Form>
            <Form.DatePicker label='Date Label' value={date} onChange={(v) => setDate(v)} disabled />
        </Form>
    )
}
render (Disabled)

Error

const ErrorExample = () => {
    const [date, setDate] = React.useState(new Date())
    return (
        <Form>
            <Form.DatePicker label='Date Label' value={date} onChange={(v) => setState({date: v})} error />
        </Form>
    )
}
render (ErrorExample)
const ErrorExample = () => {
    const [date, setDate] = React.useState(new Date('1900-12-17T03:24:00'))
    return (
        <Form>
            <Form.DatePicker label='Date Label' value={date} onChange={(v) => setState({date: v})} error="Date must be after 1990." />
        </Form>
    )
}
render (ErrorExample)

Accessibility

The user should be able to choose a date by typing into the input or by selecting a date from the calendar dropdown. The user should be able to use either method.

Keyboard Support

  • When focus is on the input, press space to open and escape to close the calendar.
  • Use tab / shift + tab to change focus from the calendar and input.
  • When focus is on the calendar, use the arrow keys to traverse through dates and enter to select a date.

Best Practices

Date pickers should:

  • Use smart defaults
  • Not be used to enter a date that is many years in the future or the past

Importing

import { DatePicker } from '@servicetitan/design-system';