Pluralsight Design System
INTRODUCTION
Install
Design assets
Contribute
Roadmap
CORE
Color
Motion
Spacing
Typography
COMPONENTS
Action Menu
Avatar
Badge
Banner
Breadcrumb
Button
Card
Checkbox
Circular Progress
Code
Date Picker
Dialog
Drawer
Dropdown
Errors
Form
Icon
Layout
Link
Radio
Row
Star Rating
Switch
Tab
Table
Tag
Text
Text Area
Text Input
Theme
Tooltip
View Toggle
PATTERNS
Iconography
Voice & tone

Date Picker
Beta
CHANGELOG

Install the component dependency:

Include a React component in your project:

PropTypes

Name
Value
Description
Default
appearance
default | subtle
visual style (from DatePicker.appearances)
default
disabled
boolean
standard input disable flag
false
error
boolean
error state flag
false
innerRef
DOM element => ()
input field react ref callback
label
string
identifying string for input
onSelect
('mm/dd/yyyy') => ()
triggered when new valid date selected
subLabel
string
supporting text or error messaging
value
string
current date as a string (format mm/dd/yyyy)

The normal React form-related props are also acceptable and expected.

Labels

Primary identification of a date picker comes through the label. Supporting text and error messaging is set in the subLabel.

Appearance

When using the dark theme, a subtle appearance is available.

Disabled

Disabled date pickers are unmodifiable and diminished visually.

Error

Error states are engaged with the error flag. Error-related messaging is sent to the subLabel prop.

Open an issue