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

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
CHANGELOG
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`
`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