Skip to content
Pelatform UI

Data inputExtension

Date Picker

A typed DD/MM/YYYY date field with a calendar popup, backed by a native date input.

Class nameTypeDescription
date-pickerplf:date-pickerComponentWraps the native field and the hidden controls
date-picker-inputsplf:date-picker-inputsPartThe row of native start and end fields
date-picker-fieldplf:date-picker-fieldPartA field that fills its row
date-picker-controlsplf:date-picker-controlsPartThe hidden controls the script shows
date-picker-triggerplf:date-picker-triggerPartA button trigger, in place of a typed field
date-picker-errorplf:date-picker-errorPartA typed field's error the script adds
date-picker-panelplf:date-picker-panelPartThe Popover panel
date-picker-bodyplf:date-picker-bodyPartThe range panel's presets and calendar
date-picker-presetsplf:date-picker-presetsPartThe preset buttons
date-picker-preset-fieldplf:date-picker-preset-fieldPartThe preset select's field the script adds below the md breakpoint, or one the page writes
date-picker-footerplf:date-picker-footerPartThe panel's buttons
date-picker-summaryplf:date-picker-summaryPartThe footer text that shows the draft
date-picker-panel-rangeplf:date-picker-panel-rangeModifierThe wider range panel, as in Date Range Picker

Default

Leave the text input unnamed: only the native input’s YYYY-MM-DD value is submitted.

JavaScript

Date Picker needs JavaScript and is an extension: the Full script and Full CSS leave it out. The Full script (pelatform-ui.min.js) and the extension scripts after it start every component on page load, with no code of your own; with Core and single files, the last line starts them. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="extensions/calendar.min.css">
<link rel="stylesheet" href="extensions/date-picker.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/calendar.min.js" defer></script>
<script src="extensions/date-picker.min.js" defer></script>
<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="extensions/calendar.prefixed.min.css">
<link rel="stylesheet" href="extensions/date-picker.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/calendar.min.js" defer></script>
<script src="extensions/date-picker.min.js" defer></script>

With ESM imports, import DatePicker from @pelatform/ui/extensions/date-picker and call use(DatePicker) before init().

Hooks

Attribute Purpose
data-plf-date-picker The date-picker container
data-plf-mode single (default) or range, as in Date Range Picker
<input type="date"> The named native input, outside the Popover; its field, the container’s child around it, hides once the text field works
data-plf-popover Holds the field, its first child, and the panel, written hidden. The field holds the calendar button, the Popover’s trigger, and the text field: an unnamed, labeled text input for DD/MM/YYYY, beside the button in one group such as an Input Group. Unless written, the script gives it that placeholder, a numeric keyboard and no autofill
data-plf-date-picker-label Optional; a span inside a button trigger that shows the chosen date, used instead of a typed field
data-plf-date-picker-clear A button in the panel that clears the date

Calendar attributes such as data-plf-disabled-dates go on the nested calendar, and the Popover hooks work as in Popover.

Methods

Method Behavior
PLF.DatePicker.getOrCreateInstance(element, options) Returns the instance, creating it for valid markup; options (month, monthCount, locale, weekStartsOn, min, max, disabledDates, today) are passed to the Calendar it creates
PLF.DatePicker.getInstance(element) Returns the instance or null
instance.getState() Returns {mode, value, draft, open}
instance.setValue(value) Accepts a date or null; returns false when invalid, unchanged or canceled
instance.open(), instance.close() Open or close the calendar; return false when nothing changes
instance.clear() Clears the accepted value
instance.destroy() Restores the native field; the value stays

Events

Event When
plf:date-picker:before-change Before a new value is accepted; cancelable
plf:date-picker:change After the native input has the new value

Each event’s detail:

Property Value
instance The Date Picker instance
trigger The control used, such as a day in the calendar or the Clear button, or null from a method
reason trigger, api, or the Calendar’s reason, such as select
previousState The state before the change, shaped like getState()
state The state after the change

Opening and closing fire the Popover events.

Keyboard

Key Action
Enter In the field, applies the typed date, as leaving the field does
Alt + Down Arrow In the field, opens the calendar and moves focus into it
Escape Discards unfinished typing and closes the calendar
Arrow keys, Home, End, Page Up, Page Down In the calendar, as in Calendar

CSS variables

The calendar uses the Calendar variables.

Variable Default
--plf-date-picker-width 20rem (320px); 48rem (768px) in range mode
--plf-date-picker-border --plf-popover-border, otherwise --plf-color-border-subtle

Built with Pelatform UIv0.1.0

Components

Getting started

Foundations

Components

Actions

Data display

Navigation

Feedback

Data input

Layout

Advanced

Integrations

Blocks

Application

Authentication

Icons