Date Picker

Date Pickers render a calendar in the form of a dropdown, enabling users to display the calendar for a given month, and allows users to select a date or range from the calendar.

Single Select provides a calendar & allows users to navigate through months or years & select a singular date.
Range Select provides a calendar & allows users to navigate through months or years & select a range of dates.
Range Select with Presets provides a calendar & allows users to navigate through months or years, select a range of dates or a select a pre-defined date range with a single action.

A date-string attribute is a string that can be parsed by Date.

Attributes

attribute:	type:	required?	default:	description:
name	string	yes		Name of the hidden input field(s) that contains the selected date as an ISO8601 string. In case of a 'range' selector, two fields will be used, which use this name suffixed with `_start` & `_end`
placeholder	string	no		Input placeholder
range	boolean	no	`false`	Enable selection of date-range instead of single date
presets	boolean	no	`false`	Should a list presets be shown? (only available if 'range' = `true`)
error	boolean	no	`false`	Set input element in error state.
clearable	boolean	no	`false`	Should the input be clearble?
date-start	date-string	no		At what month the calendar should open by default.
date-min	date-string	no		Minimum selectable date.
date-max	date-string	no		Maximum selectable date.
active-start	date-string	no		Start of selected range. Selected date in non-range mode.
active-end	date-string	no		End of selected range.

Methods

setPresets(presets)

Sets the presets on a range datepicker (requires 'range' & 'presets' to be active)

param:	type:	default:	description:
presets	array		Array of preset options, each having 3 properties: - start: Date object - end: Date object - title: string

dropdownOpen()

Opens the datepicker dropdown

dropdownClose()

Closes the datepicker dropdown

Events

selected

Triggered whenever a date or range is selected. Contains a single date in 'single' mode. Contains 'start' & 'end' date objects in 'range' mode.

Examples

Datepicker (Single)

Single Select provides the user with a calendar & allowing them to navigate through months or years & select a singular date at a time.

<dl-datepicker></dl-datepicker>

Range Datepicker

Range Select provides the user with a calendar & allowing them to navigate through months or years & select a range of dates at a time.

waiting for selection…

<dl-datepicker range id="datepicker-range"></dl-datepicker>
<p id="datepicker-range-output">waiting for selection…</p>

var el1 = document.getElementById('datepicker-range')
var output1 = document.getElementById('datepicker-range-output')

el1.addEventListener('selected', function(event) {
    var start = event.detail.start
    var end = event.detail.end
    if (start && end) {
       output1.innerText = 'Selected '+ start.toDateString() +' — '+ end.toDateString()
    }
})

Range Datepicker with Presets

Range Select with Presets provides the user with a calendar & allowing them to navigate through months or years, select a range of dates at a time or single action with a pre-defined range.

<dl-datepicker
    range
    presets
    active-start="2018-01-01"
    active-end="2018-01-16"
></dl-datepicker>

Datepicker (Limited)

The minimum selectable date for this datepicker is set to 2018-03-15

<dl-datepicker date-min="2018-03-15"></dl-datepicker>

Datepicker (Clearable)

The datepicker is not clearable by default, it means that doesn't display the X in the input field. If the clearable attribute is true, the content of the input field will be clearable by the X icon.

<dl-datepicker clearable></dl-datepicker>

Dealogic Styleguide

section menu