Date picker
Examples
Labels
Primary identification of a date picker comes through the label
. Supporting text and error messaging is set in the subLabel
.
Publish date
//
Publish date
//
When your course will go live
import DatePicker from '@pluralsight/ps-design-system-datepicker'import React from 'react'function Example() {return (<div className="example-grid--col-2"><DatePicker label="Publish date" /><DatePickerlabel="Publish date"subLabel="When your course will go live"/></div>)}export default Example
Appearance
When using the dark
theme, a subtle
appearance is available.
//
import DatePicker from '@pluralsight/ps-design-system-datepicker'import Theme from '@pluralsight/ps-design-system-theme'import React from 'react'function Example() {return (<Theme name={Theme.names.dark}><DatePicker appearance={DatePicker.appearances.subtle} /></Theme>)}export default Example
Disabled
Disabled date pickers are unmodifiable and diminished visually.
Can't touch this
//
import DatePicker from '@pluralsight/ps-design-system-datepicker'import React from 'react'function Example() {return <DatePicker disabled label="Can't touch this" />}export default Example
Error
Error states are engaged with the error
flag. Error-related messaging is sent to the subLabel
prop.
Publish date
//
Field is required
import DatePicker from '@pluralsight/ps-design-system-datepicker'import React from 'react'function Example() {return <DatePicker error label="Publish date" subLabel="Field is required" />}export default Example
Usage & Types
- Version
- Install
npm install @pluralsight/ps-design-system-datepicker
- Import
import Datepicker from '@pluralsight/ps-design-system-datepicker'
Name | Type | Description | Default |
---|---|---|---|
appearance |
| visual style (from DatePicker.appearances) | default |
disabled | boolean | standard input disable flag | false |
error | boolean | error state flag | false |
label | string | identifying string for input |
|
onChange | (React.ChangeEvent | React.MouseEvent, Date) => void | triggered when a valid date selected from calendar or hen sub field onChange is triggered with a valid date |
|
subLabel | string | supporting text or error messaging |
|
value Required | Date | undefined | date of picker |
|