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" />
<DatePicker
label="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
default | subtle
visual style (from DatePicker.appearances)default
disabledbooleanstandard input disable flagfalse
errorbooleanerror state flagfalse
labelstringidentifying string for input
onChange(React.ChangeEvent | React.MouseEvent, Date) => voidtriggered when a valid date selected from calendar or hen sub field onChange is triggered with a valid date
subLabelstringsupporting text or error messaging
value
Required
Date | undefineddate of picker