Skip to content
Telescope
Components

Date inputNew: New

A means of inputting a date - either by typing it or using a date picker interface.

Basic usage

First, import the component.

import {DateInput} from '@pleo-io/telescope'

Then use it, like so:

API reference

The component accepts the following props.

Information:

This component is build on top of the Input component.

PropTypeDefault
disabled
boolean
innerRef
RefObject<HTMLInputElement>
isInvalid
boolean
isOpen
boolean
false
isRequired
boolean
label
string
maxDate
Date
minDate
Date
name*
string
onChange
function
() => {}
postfix
enum
prefix
enum
renderError
Function
renderInput
function
shouldReturnFocusToInput
boolean
true
skeleton
boolean
false
value
string

Examples

See the guidelines page for information around when and why to use the various options.

No return focus

By default the focus will return to the input field after selecting a date from the date picker. It is possible to disable this behaviour.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" shouldReturnFocusToInput={false} />
</FormControl>

Required

To ensure accessibility, use the isRequired property (not the HTML required property) to mark a field as required for assistive technologies (such as screen readers).

Information:
Visually, you should mark the minority of fields in a form as "required" or "optional".
<FormControl maxWidth="240px">
    <FormControl.Label>Date (required)</FormControl.Label>
    <DateInput isRequired name="date" />
</FormControl>

Invalid

Use the isInvalid property to mark the field as invalid both visually (for sighted users) and for assistive technologies (such as screen readers).

Information:
Always provide a clear error message when marking a field as invalid.
<FormControl maxWidth="240px">
    <FormControl.Label>Date (required)</FormControl.Label>
    <DateInput isInvalid name="date" />
    <FormControl.Error>Enter a date</FormControl.Error>
</FormControl>

Advanced use cases

For advanced use cases and layouts, use this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports features such as hint text, help popovers and error messages.

<FormControl maxWidth="240px">
    <FormControl.Label>Date</FormControl.Label>
    <DateInput name="date" />
</FormControl>

Usage with Formik and Yup

For the sake of convenience, we provide a Formik version of this component. By using the `useField` hook it automatically handles value changes, blur events, error messages, and touched state for you. We recommend Yup for form validation.

Information:
The validation behaviour of the Formik component may not always be inline with those in our Form guidelines, so please review before usage.
<Formik
    initialValues={{date: ''}}
    onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    validationSchema={yup.object().shape({
        date: yup.date().required('Enter a date'),
    })}
>
    <Form>
        <Stack space={24}>
            <FormikDateInput label="Date" name="date" isRequired />
            <Button type="submit">Submit</Button>
        </Stack>
    </Form>
</Formik>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page