Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Date Picker

Peer review pending

A Date Picker is a form element used to select a date.

Version 6.1.0
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/date-picker - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {DatePicker, formatReturnDate} from '@twilio-paste/core/date-picker';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/helptext';

const DatePickerExample = () => {
  return (
    <>
      <Label htmlFor="foo" required>
        Start date
      </Label>
      <DatePicker
        aria-describedby="foo_text"
        id="foo"
        name="foo"
        onChange={(evt) => formatReturnDate(evt.target.value, 'MM/dd/yyyy')}
        required
      />
      <HelpText id="foo_text">Select a date.</HelpText>
    </>
  );
};

Props

Props page anchor

DatePicker

DatePicker page anchor

cursor

Type
| Cursor | (Cursor | null | undefined)[] | { [x: string]: Cursor | undefined; [x: number]: Cursor | undefined }

disabled

Disables the input.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'DATEPICKER'

hasError

Sets the input to an error state.

Type
boolean

height

Type
never

i18nStepDownLabel

Provides an accessible label for the decrement button on inputs of type "number" when using non-English languages.

Type
string

i18nStepUpLabel

Provides an accessible label for the increment button on inputs of type "number" when using non-English languages.

Type
string

id

Sets the id of the input. Should match the htmlFor of Label.

Type
string

name

Sets the name of the input.

Type
string

padding

Type
"space0"

paddingRight

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

placeholder

Sets the placeholder of the input.

Type
string

readOnly

Sets the input to readonly.

Type
boolean

required

Sets the input as required.

Type
boolean

size

Type
never

style

Type
never

value

Sets the value of the input.

Type
string

variant

Type
InputVariants

width

Type
never