The date component is designed to enter a date, without time. On the desktop, the component shows as a field with a linked date picker.
You use the date component like a regular input field, for example:
<fr:date ref="birth-date">
<xf:label>Birth Date</xf:label>
</fr:date>
fr:date
must be bound to xs:date
.
fr:date
supports parameters, which you can set via properties, Form Builder settings, or directly on fr:date
.
[SINCE Orbeon Forms 2022.1]
The week-start-day
parameter allows you to specify the first day of the week:
- values:
sunday
ormonday
- default: when not specified, the start day depends on the language (for example Sunday for English, Monday for French)
This is unspecified by default:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.date.week-start-day.*.*"
value=""/>
[SINCE Orbeon Forms 2023.1.4]
The Date component adds an output-format
parameter. This parameter can be used to override the global property at the control level, the form level, or via properties-local.xml
with the following new property:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.date.output-format"
value=""/>
As usual, the property can use an app name and form name (with possible wildcards) to specify a default value for all controls in a given app/form:
<property
as="xs:string"
name="oxf.xforms.xbl.fr.date.output-format.acme.*"
value="[H01]:[m]"/>
The value is in the same format as the global oxf.xforms.format.input.date
property.
By default, the output-format
parameter is not set, and the global oxf.xforms.format.input.date
property is used for backward compatibility.
On iOS, the native iOS date picker is used by default, unless users enabled Request Desktop Website in Safari, in which case they will see the same behavior as they would on the desktop.
[SINCE Orbeon Forms 2023.1] As browser support for the native date picker on desktop has improved over the year, and since it is better supported by screen readers, you may want to use the native date picker not only on mobile but also on desktop. You can achieve this by setting the property mentioned below. When doing so, the date format is determined by the browser based on the user's locale. Consequently, the properties oxf.xforms.format.input.date
and oxf.xforms.format.output.date
have no effect on the format of the native date picker.
<property
as="xs:string"
name="oxf.xforms.xbl.fr.date.native-picker.*.*"
value="always"/>