XUL:Specs:DateTimePickers

Requirements

• Need widgets for selecting or entering dates and times
• Should support 12 or 24 hour clocks
• Should display times and dates in a localized manner

Time Picker

A widget for selecting times. It contains a textbox with a spinbuttons next to it. The textbox is actually three textboxes inside of a box styled to look like a textbox. The three textboxes allow entry of an hour, minute and second. The spinbuttons adjusts the value of the currently focused textbox. A fourth textbox appears for 12 hour clocks which allows selection of AM or PM.

<timepicker value="13:15"
            increment="10"
            hideseconds="false"/>

hideseconds

set to true to hide the seconds entry field.

increment

the granularity of minutes that may be selected. For instance, 5 means that only minutes divisible by 5 may be selected. Pressing the spinbuttons while the minute field is focused will increment or decrement the minutes by this value.

value

the default time to be set for the timepicker. The syntax is 'hh:mm:ss'.

Properties:

value

the current value selected in the timepicker as a Date object.

hour

the currently selected hour from 0 to 23.

minute

the currently selected minute from 0 to 59.

second

the currently selected second from 0 to 59.

isPM

true if the hour is between 12 and 23.

hideseconds

set to true to hide the seconds entry field.

increment : gets and sets the value of the increment attribute.

All of the properties above may be modified to change the current time.

Methods:

decrease

decrease the currently focused field by 1.

increase

increase the currently focused field by 1.

Events

The change event is fired whenever the time is changed.

Date Picker

A widget for selecting dates. There are three varieties, chosen by setting the type attribute. The default datepicker, if no type attribute is present, is an entry datepicker. Other types are grid and popup.

• entry - contains a textbox with a spinbuttons next to it and works like the timepicker but for entering the year, month and date.
• grid - a calendar grid for selecting a date. The mouse may be used to click on a date or the keyboard may be used to navigate to a date.
• popup - a combination entry field with a dropdown button. Pressing the dropdrop button opens a popup with the grid in it.

<datepicker type="grid"
            value="Jul 20, 2005"
            hideyear="false"/>

hideyear

set to true to hide the year entry field. This would be used, for example, for birthday fields where the year is not always relevant.

type

either grid or popup

value

the default date to be set for the datepicker.

Properties:

value

the current value selected in the datepicker as a Date object.

year

the currently selected year from 1 to 9999.

month

the currently selected minute from 0 to 11.

date

the currently selected second from 1 to 31.

hideyear

set to true to hide the year entry field.

All of the properties above may be modified to change the current date.

Methods:

decrease

decrease the currently focused field by 1.

increase

increase the currently focused field by 1.

Events

The change event is fired whenever the date is changed.