Date Input

A date picker input for selecting calendar dates. Renders as an HTML <input type="date"> with a native browser date picker.

Properties

Property	Type	Default	Description
name	text	''	The field name. Must match your database column name.
label	text	''	The visible label displayed above the input.
placeholder	text	''	Placeholder text shown when the input is empty (shown in browsers that support it).
required	boolean	false	Whether the field is required for form submission.
value	text	''	Pre-populate the input with a date value (YYYY-MM-DD format). Supports expression binding (e.g., {{ item.due_date }}).

Events

• onChange -- Fires when the selected date changes.
• onBlur -- Fires when the input loses focus.
• onFocus -- Fires when the input gains focus.

Example

A due date field:

name: due_date
label: Due Date

A birth date field:

name: birth_date
label: Date of Birth

An edit form field pre-populated with an existing date:

name: due_date
label: Due Date
value: "{{ item.due_date }}"
required: true

Tips

• Place inside a Form Container for the value to be included in form submissions.
• The submitted value format is YYYY-MM-DD, which matches the date column type in WP-Nexus database tables.
• The date picker appearance depends on the user's browser. All modern browsers provide a native calendar widget.
• For date range selection (start and end dates), use two Date Input widgets with names like start_date and end_date.
• For filtering data by date, use a Date Input inside a form to capture the date and filter your data pipeline accordingly.