widget:date-picker

Purpose

Defines a Date Picker widget that is bound to a form field.

Contained by

Contains

Attribute groups

Attributes

Attribute Description Type Default Options Use
dayInputField References a day form field xs:string     optional 
inputField References a date input form field xs:string     optional 
monthInputField References a month form field xs:string     optional 
yearInputField References a year form field xs:string     optional 

Actions

Action Description
dismiss Hides a Date Picker widget
next-month Switches a calendar display to the next month
next-year Switches a calendar display to the next month
previous-month Switches a calendar display to the previous month
previous-year Switches a calendar display to the previous year
set-today Sets a current date in the field associated with a Date Picker widget

Properties

Property Description Type Access
month Returns a month displayed by the Date Picker widget xs:string read 
year Returns a year displayed by the Date Picker widget xs:string read 

Example

<?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> &lt;&lt; </widget:previous-year>
        <widget:previous-month> &lt; </widget:previous-month>
        <widget:month-display/>
        <widget:year-display/>
        <widget:next-month> &gt; </widget:next-month>
        <widget:next-year> &gt;&gt; </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>

Related topics