Date Picker | Web Component

The default date format for the <dk-date-picker /> is "MM/dd/yyyy". To change the format add a format prop on the date picker and set a string format based on this spec.

"MM/dd/yyyy": "yyyy/MM/dd":

Properties

Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.

Property	Attribute	Description	Type	Default
`format`	`format`	Pass a string that follows the unicode token spec: Unicode Spec	string	"MM/dd/yyyy"
`label`	`label`	Use this to set the label of the date picker.	string	null
`maxDateString`	`max`	Set's the max date that can be selected. Must match the date format set on the component. The default is "MM/dd/yyyy"	string	null
`minDateString`	`min`	Set's the min date that can be selected. Must match the date format set on the component. The default is "MM/dd/yyyy"	string	null
`open`	`open`	Set this property to true or false to control if the picker is open or not	boolean	false
`range`	`range`	Enables date range selection	boolean	false
`typedRange`	`undefined`	When using a range date picker an object that store the selected values will be store here.	{ start: Date; end: Date; }	{start: null, end: null,}
`typedValue`	`undefined`	This property holds the value of the current selected date. It is a JS Date Object.	Date	null
`value`	`value`	The date string for the selected date. It must be in the "MM/DD/YYYY" format.	string	null
`valueEnd`	`value-end`	The date string of the end of the selected range.	string	null
`valueStart`	`value-start`	The date string of the start of the selected range.	string	null

Events

Event	Description	Type
`dkChange`	The change event is fired whenever a user has picked a date. If it is a range picker the selected property will be an object with the start and end.	{ selectionType?: SelectionType; selected: Date

Single

<dk-date-picker></dk-date-picker>

Format

<dk-date-picker format="yyyy/MM/dd"></dk-date-picker>

Preset

<dk-date-picker
        value="03/04/2020"
        min="01/01/2020"
        max="12/29/2020"></dk-date-picker>

Label

<dk-date-picker
        label="Labeled date picker"
        min="01/01/2020"
        max="12/29/2020"></dk-date-picker>

Range

<dk-date-picker range="true"></dk-date-picker>

Range Preset

<dk-date-picker
        range="true"
        value-start="03/03/2020"
        value-end="04/01/2020"></dk-date-picker>