InputfieldDatetime

Date and time input

Collects date, time, or date+time values through a text field with jQuery UI datepicker/timepicker, separate month/day/year selects, or HTML5 native date/time inputs. Values are stored internally as UNIX timestamps.

$f = $modules->get('InputfieldDatetime');
$f->name = 'event_date';
$f->label = 'Event date and time';
$f->val(time());
$form->add($f);

For the shared Inputfield API (attributes, labels, collapsed states, showIf, rendering, processing, etc.), see Inputfield API.

Expand all API reference

Input types

InputfieldDatetime supports three input types controlled by the inputType property:

Type	Class	Description
`text`	`InputfieldDatetimeText`	Single text input with optional jQuery UI datepicker and timepicker (default)
`select`	`InputfieldDatetimeSelect`	Separate `<select>` elements for month, day, and year
`html`	`InputfieldDatetimeHtml`	HTML5 date or time input, or a paired date-and-time input

// HTML5 date+time inputs
$f->inputType = 'html';
$f->htmlType = 'datetime';

// Separate select inputs
$f->inputType = 'select';
$f->dateSelectFormat = 'Mdy'; // "September 15 2024"

Constants

Use these constants when configuring the jQuery UI datepicker for the text input type.

Constant	Value	Description
`InputfieldDatetime::datepickerNo`	`0`	No datepicker
`InputfieldDatetime::datepickerClick`	`1`	Show datepicker on button click
`InputfieldDatetime::datepickerInline`	`2`	Inline datepicker always visible (no timepicker support)
`InputfieldDatetime::datepickerFocus`	`3`	Show datepicker when input is focused (recommended)

$f->datepicker = InputfieldDatetime::datepickerFocus;

Properties

Common properties

Property	Type	Description
`value`	`int\|string`	UNIX timestamp integer, or empty string for no value
`inputType`	`string`	Input type: `text`, `select`, or `html`
`defaultToday`	`bool\|int`	With `text` or `html`, display the current date/time when the value is blank
`subYear`	`int`	Substitute year for month/day or time-only input (default `2010`)
`subMonth`	`int`	Substitute month for time-only selections (default `4`)
`subDay`	`int`	Substitute day for month/year or time-only input (default `8`)
`subHour`	`int`	Substitute hour for date-only selections (default `0`)
`subMinute`	`int`	Substitute minute for date-only selections (default `0`)
`requiredAttr`	`bool\|int`	Also add HTML5 `required` attribute when field is required

Text input type properties

Property	Type	Description
`datepicker`	`int`	Datepicker mode, one of the `datepicker*` constants
`dateInputFormat`	`string`	PHP date format for date input (default `Y-m-d`)
`timeInputFormat`	`string`	PHP date format for time input (default none)
`timeInputSelect`	`int`	Use `<select>` for time input (`1`) or slider (`0`)
`yearRange`	`string`	Datepicker year range, e.g. `-30:+20`
`placeholder`	`string`	Placeholder text
`showAnim`	`string`	Datepicker animation: `fade`, `show`, `clip`, `drop`, `puff`, `scale`, `slide`, or `none`
`changeMonth`	`bool\|int`	Render month as dropdown
`changeYear`	`bool\|int`	Render year as dropdown
`showButtonPanel`	`bool\|int`	Show Today/Done buttons
`numberOfMonths`	`int`	Number of month calendars shown side-by-side
`showMonthAfterYear`	`bool\|int`	Show month after year in header
`showOtherMonths`	`bool\|int`	Show non-selectable dates from adjacent months

HTML5 input type properties

Property	Type	Description
`htmlType`	`string`	`date`, `time`, or `datetime`; `datetime` renders paired native date and time inputs
`dateStep`	`int`	`step` attribute for date input
`dateMin`	`string`	`min` attribute for date input (`YYYY-MM-DD`)
`dateMax`	`string`	`max` attribute for date input (`YYYY-MM-DD`)
`timeStep`	`int`	`step` attribute for time input, in seconds
`timeMin`	`string`	`min` attribute for time input (`HH:MM`)
`timeMax`	`string`	`max` attribute for time input (`HH:MM`)

Select input type properties

Property	Type	Description
`dateSelectFormat`	`string`	Order/format of month/day/year selects, e.g. `mdy`, `Mdy`, `dmy`, `yMd`
`timeSelectFormat`	`string`	Time select format (reserved, currently unused)
`yearFrom`	`int`	First selectable year
`yearTo`	`int`	Last selectable year
`yearLock`	`bool\|int`	Disallow years outside yearFrom/yearTo range

Methods

getInputTypes()

Return all available input type instances keyed by type name.

$types = $f->getInputTypes();
foreach($types as $name => $type) {
    echo $name; // text, select, or html
}

getInputType($typeName = '')

Return the active input type instance. Defaults to text if $typeName is omitted or invalid.

$type = $f->getInputType(); // InputfieldDatetimeText, etc.

setAttribute($key, $value)

Sets an attribute. When $key is value, strings are converted to UNIX timestamps when possible.

$f->setAttribute('value', '2024-09-15 14:30:00');
echo $f->attr('value'); // unix timestamp

datepickerOptions($options = [])

Get or set custom jQuery UI datepicker options. Also supports timepicker options from the jQuery UI Timepicker Addon.

$f->datepickerOptions(['showButtonPanel' => true]);

// Set defaults for all datetime fields via config
$config->js('InputfieldDatetimeDatepickerDefaults', ['showButtonPanel' => true]);

processInput(WireInputData $input)

Processes submitted input and updates the value. Usually called automatically by forms.

Configuration

When used as part of a FieldtypeDatetime field, configuration options are presented in the field editor. The available options depend on the selected inputType.

Notes

InputfieldDatetime extends Inputfield and inherits all its methods and properties.
The corresponding Fieldtype is FieldtypeDatetime.
Values are stored and retrieved as UNIX timestamps. Use $datetime->formatDate() or PHP's date() to format for display.
For date/time formatting reference, see WireDateTime.
Source file: wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module

API reference: methods, properties, hooks

// get a datetime Inputfield
$f = $modules->get('InputfieldDatetime');
$f->attr('name', 'test_date');
$f->label = 'Test date';
$f->val(time()); // value is get or set a UNIX timestamp

// date input with jQuery UI datepicker on focus
$f->inputType = 'text'; // not necessary as this is the default
$f->datepicker = InputfieldDatetime::datepickerFocus;

// date selects
$f->inputType = 'select';
$f->dateSelectFormat = 'mdy'; // month abbr (i.e. 'Sep'), day, year
$f->dateSelectFormat = 'Mdy'; // month full (i.e. 'September'), day, year
$f->yearFrom = 2019; // optional year range from
$f->yearTo = 2024; // optional year range to

// HTML5 date, time or date+time inputs
$f->inputType = 'html';
$f->htmlType = 'date'; // or 'time' or 'datetime'

Click any linked item for full usage details and examples. Hookable methods are indicated with the icon. In addition to those shown below, the InputfieldDatetime class also inherits all the methods and properties of: Inputfield, WireData and Wire.

Common
Properties

Common

Name	Return	Summary
InputfieldDatetime::datepickerOptions() InputfieldDatetime::datepickerOptions() InputfieldDatetime::datepickerOptions(array $options = [])	`array`	Get or set jQuery UI datepicker (and timepicker) options
InputfieldDatetime::getConfigInputfields() InputfieldDatetime::getConfigInputfields() InputfieldDatetime::getConfigInputfields()	None	Date/time Inputfield configuration, per field
InputfieldDatetime::getInputType() InputfieldDatetime::getInputType() InputfieldDatetime::getInputType(string $typeName = '')	`InputfieldDatetimeType`	Get current date/time input type instance
InputfieldDatetime::getInputTypes() InputfieldDatetime::getInputTypes() InputfieldDatetime::getInputTypes()	`InputfieldDatetimeType`	Get all date/time input types
InputfieldDatetime::processInput() InputfieldDatetime::processInput(WireInputData $input) InputfieldDatetime::processInput(WireInputData $input)	`Inputfield` `InputfieldDatetime`	Process input
InputfieldDatetime::render() InputfieldDatetime::render() InputfieldDatetime::render()	`string`	Render the date/time inputfield
InputfieldDatetime::renderReady() InputfieldDatetime::renderReady() InputfieldDatetime::renderReady($parent = null, bool $renderValueMode = false)	`bool`	Called before the render method, from a hook in the Inputfield class
InputfieldDatetime::renderValue() InputfieldDatetime::renderValue() InputfieldDatetime::renderValue()	None	Render value for presentation, non-input
InputfieldDatetime::set() InputfieldDatetime::set(string $key, mixed $value) InputfieldDatetime::set(string $key, mixed $value)	`Inputfield` `WireData`	Set property
InputfieldDatetime::setAttribute() InputfieldDatetime::setAttribute(string $key, mixed $value) InputfieldDatetime::setAttribute(string $key, mixed $value)	`Inputfield` `InputfieldDatetime`	Capture setting of the 'value' attribute and convert string dates to unix timestamp

Properties

Name	Return	Summary
InputfieldDatetime::changeMonth	`bool` `int`	Show a select dropdown to allow changing month? DEFAULT: true
InputfieldDatetime::changeYear	`bool` `int`	Show a select dropdown to allow changing year? DEFAULT: true
InputfieldDatetime::dateInputFormat	`string`	Date input format to use, see WireDateTime::$dateFormats DEFAULT: 'Y-m-d'
InputfieldDatetime::dateMax	`string`	Refers to the max attribute on date inputs, ISO-8601 (YYYY-MM-DD)
InputfieldDatetime::dateMin	`string`	Refers to the min attribute on date inputs, ISO-8601 (YYYY-MM-DD)
InputfieldDatetime::dateSelectFormat	`string`	Format to use for date select, i.e. 'mdy' for 'Sep 1 2024' or 'Mdy' for 'September 1 2024'
InputfieldDatetime::dateStep	`int`	Refers to the step attribute on date inputs
InputfieldDatetime::datepicker	`int`	jQuery UI datepicker type (see `datepicker*` constants)
InputfieldDatetime::defaultToday	`int` `bool`	When no value is present, default to today’s date/time?
InputfieldDatetime::htmlType	`string`	When "html" is selection for $inputType, this should be one of: "date", "time" or "datetime".
InputfieldDatetime::inputType	`string`	Input type to use, one of: "text", "select" or "html" (when html type is used, also specify $htmlType).
InputfieldDatetime::numberOfMonths	`int`	Number of month calendars to show together side-by-side DEFAULT: 1
InputfieldDatetime::placeholder	`string`	Placeholder attribute text
InputfieldDatetime::requiredAttr	`bool` `int`	When combined with "required" option, this also makes it use the HTML5 "required" attribute . DEFAULT: false
InputfieldDatetime::showAnim	`string`	Animation type DEFAULT: 'fade'
InputfieldDatetime::showButtonPanel	`bool` `int`	Show "Today" and "Done" buttons under the calendar? DEFAULT: false
InputfieldDatetime::showMonthAfterYear	`bool` `int`	Show the month after the year? DEFAULT: false
InputfieldDatetime::showOtherMonths	`bool` `int`	Show dates in other months (non-selectable) at the start or end of the current month? DEFAULT: false
InputfieldDatetime::subDay	`int`	Substitute day when month+year or time only selections are made DEFAULT: 8
InputfieldDatetime::subHour	`int`	Substitute hour when date-only selections are made DEFAULT: 0
InputfieldDatetime::subMinute	`int`	Substitute minute when date-only selections are made DEFAULT: 0
InputfieldDatetime::subMonth	`int`	Substitute month when time-only selections are made DEFAULT: 4
InputfieldDatetime::subYear	`int`	Substitute year when month+day or time only selections are made DEFAULT: 2010
InputfieldDatetime::timeInputFormat	`string`	Time input format to use, see WireDateTime::$timeFormats DEFAULT: ''
InputfieldDatetime::timeInputSelect	`int`	jQuery UI timeSelect type (requires datepicker)—specify 1 to use a `<select>` for time input, or 0 to use a slider DEFAULT: 0
InputfieldDatetime::timeMax	`string`	Refers to the max attribute on time inputs (HH:MM)
InputfieldDatetime::timeMin	`string`	Refers to the min attribute on time inputs (HH:MM)
InputfieldDatetime::timeSelectFormat	`string`	Format to use for time select
InputfieldDatetime::timeStep	`int`	Refers to the step attribute on time inputs
InputfieldDatetime::value	`int`	This Inputfield keeps the value in UNIX timestamp format (int).
InputfieldDatetime::yearFrom	`int`	First selectable year DEFAULT: current year - 100
InputfieldDatetime::yearLock	`bool` `int`	Disallow selection of years outside the yearFrom/yearTo range? DEFAULT: false
InputfieldDatetime::yearRange	`string`	Selectable year range in the format `-30:+20` where -30 is number of years before now and +20 is number of years after now.
InputfieldDatetime::yearTo	`int`	Last selectable year DEFAULT: current year + 20

Additional methods and properties

In addition to the methods and properties above, InputfieldDatetime also inherits the methods and properties of these classes:

API reference based on ProcessWire core version 3.0.269