Now.js Framework Documentation
DateElementFactory
DateElementFactory
EmbeddedDateTime A hand-built date/time picker that replaces the native <input type="date"> and friends, so the calendar UI looks and behaves the same across browsers. Supports date, time and datetime-local modes. Instantiated once per element by DateElementFactory; the original input is hidden but kept so the form still submits its value.
Generated from source on 2026-08-21. Descriptions come from JSDoc in the file.
Re-rundocs_scaffoldwhen the code changes; hand edits are lost on regeneration
Source
- File:
Now/js/DateElementFactory.js(1383 lines) - Form: ES class
Public methods (13)
close()
Close the picker dropdown. Delegates to the shared DropdownPanel, which triggers the picker's own close callback.
static createInstance(element, config = {})
Get or create the element's instance state, same as the base ElementFactory.
destroy()
Tear the picker down: close it if open and remove its locale listener.
getDate()
The currently selected date.
getElement()
The wrapper element this picker rendered into.
getValue()
The value currently stored for form submission.
nextMonth()
Advance the visible calendar by one month, rolling over into the next year.
open()
Open the picker dropdown. Ignored while the field is disabled, read-only, or already open. For a time-only picker the calendar grid is hidden and only the time controls show.
previousMonth()
Step the visible calendar back one month, rolling over into the previous year.
selectDate(date)
Choose a date, combining it with the current time for datetime-local mode.
setValue(value)
Set the picker's value programmatically. An empty value clears both the date and time state, not just the display.
static setupElement(instance)
Replace the native date input with an EmbeddedDateTime picker.
toggle()
Open the picker if closed, close it if open.
Events
These are DOM CustomEvents dispatched on the element, so listen with
element.addEventListener() and read the values from event.detail.
| Event | When Triggered | event.detail |
|---|---|---|
gdatetime:open |
The picker opened | {type, value} |
gdatetime:change |
A date or time was picked | {type, value, date} |
gdatetime:close |
The picker closed | {type, value} |
element:change |
The element value changed | {elementId, value, type} |
Data attributes used
data-display-format · data-format · data-show-seconds
Depends on
DropdownPanel · ElementFactory · ElementManager · EventManager · Utils