The Date Picker widget allows users to easily fill in a date form field by selecting a date from a calendar display.
The Date Picker widget allows users to easily fill in a date form field by selecting a date from a calendar display.
Initially, the calendar is hidden. It appears when a form field associated with the Date Picker widget receives a focus, or an appropriate JavaScript method is called. It disappears when the user selects a date or presses the dismiss button.
You can control the calendar styling and date format. The JavaScript API can be used to set calendar properties, such as a range of available dates, day and month names, excluded days, an so on. The navigational elements which switch the calendar display between months and years can be styled as well.
Calendar appears when the user clicks or moves the focus to a form field associated with a Date Picker widget.
When a calendar is visible, the user can navigate between days, months and years. Clicking the Next or Previous Month buttons, displays the respective month. When the user chooses the Next or Previous Year buttons, the same month in the following or previous year will be shown.
When the user clicks on a date it is copied to the referenced form field, and the calendar is closed. The 'Set Today' button picks the current date. The cancel button closes a calendar without changing a form field.
Disabled dates, or those which are outside of defined range, cannot be actioned.
The Date Picker widget is defined by widget:date-picker. The inputField attribute references the date input field. The widget:month-display, widget:year-display and widget:calendar-display elements display the name of a month, year and the whole calendar, respectively. Additional elements provide navigation between months and years.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<title>widget:date-picker</title>
<xforms:model>
<xforms:instance>
<si:instance>
<si:item name="date"/>
</si:instance>
</xforms:instance>
</xforms:model>
</head>
<body>
<div>
<div>Click the field to unfold Date Picker</div>
<xforms:input id="date" ref="date">
<xforms:label>Date </xforms:label>
</xforms:input>
<widget:date-picker id="myDatePicker" inputField="date">
<widget:previous-year> << </widget:previous-year>
<widget:previous-month> < </widget:previous-month>
<widget:month-display/>
<widget:year-display/>
<widget:next-month> > </widget:next-month>
<widget:next-year> >> </widget:next-year>
<widget:calendar-display/>
<widget:set-today>today</widget:set-today>
<widget:button action="myDatePicker#dismiss">close</widget:button>
</widget:date-picker>
</div>
</body>
</html>Some of the calendar properties can be specified using the load action.
<widget:date-picker inputField="date-input">
<widget:load src="service/date-picker"/>
</widget:date-picker>The range-start, range-end and current-date attributes set the range of available dates. All the attributes must specify a date in the standard ISO format: yyyy-mm-dd.
<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
<response:head/>
<response:body>
<response:date-picker range-start="2000-01-01" range-end="2010-12-31" current-date="2007-01-01"/>
</response:body>
</response:response>The JavaScript API allows you to configure a calendar and apply styling. See JavaScript support for details.
The following example defines a calendar range between 01/01/2005 and 01/01/2006. All Sundays will be disabled and marked in red.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
<mcs:handler id="handler_id" type="text/javascript">
if (Widget) {
Widget.getInstance("picker_id").setStartDate("01/01/2005");
Widget.getInstance("picker_id").setEndDate("01/01/2006");
Widget.getInstance("picker_id").setDisabledWeekDays(7);
Widget.getInstance("picker_id").setDisabledStyle({color:red});
}
</mcs:handler>
<event:listener observer="body_id" handler="#handler_id" event="load"/>
</head>
<body id='body_id'>
<xforms:input id="date-input">
<xforms:label>Enter your birth date"</xforms:lable>
</xforms:input>
<widget:date-picker id="picker_id" inputField="date-input">
<month-display/>
<year-display/>
<calendar-display/>
</widget:date-picker>
</body>
</html>The mcs-toggle-event property defines on which event, click or focus, a calendar should be opened. The default is click.
If a device does not support the Date Picker widget, the regular form field will be rendered.