Date picker

The date picker allows the user to select dates via a dropdown widget or enter them into the provided input field.

The dates that can be selected via the date picker may be restricted using a 1010data query, where the first column in the query results contains integers in the date form: YYYYMMDD (e.g., 20140823).

Label
The text that is displayed preceding the date picker input field and dropdown widget.
Width of label
The number of pixels allocated for the text preceding the input field.

If the text of the label is greater than the width specified, the label is truncated.

Width of input
The number of pixels allocated for the input field.

If the values in the input field are greater than the width specified, the values in the field are truncated.

Field color
The color of the date picker field.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Field text color
The color of the text in the date picker field.
The color can be selected using the color picker or can be specified as:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Field text style
The appearance of the text in the date picker field.

When this field gets focus, a dialog is presented that allows the user to select the family, style, size, and other characteristics of the text such as letter spacing and underlining.

Variable for value
The variable to hold the value of the selected date.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Label for end (date range)
When specifying a date range, the text that is displayed preceding the date picker input field and dropdown widget for the end date.
Width of to label
The number of pixels allocated for the text preceding the Label for end (date range) input field.

If the text of the label is greater than the width specified, the label is truncated.

Variable for end value (date range)
When specifying a date range, the variable to hold the value of the selected end date.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Earliest allowed date
The earliest selectable date (in YYYYMMDD format).
Latest allowed date
The latest selectable date (in YYYYMMDD format).
Date format
The format for displaying the selected date in the date picker input field. The format may be specified using either a valid 1010data display format or a string representation.

A 1010data display format can be specified for the date format (e.g., "type:date4y"). See Display Formats for a list of valid formats.

Alternatively, a string representation may be specified using "mm" for month, "dd" for day, and "yy" (or "yyyy") for year. The following are examples of valid string representations for date formats:
  • mm/dd/yy
  • mm/dd/yyyy
  • mm-dd-yy
Note: The string representation must be all lowercase letters.

For instance, the date 20141109 will be displayed as 11/09/14 when the specified date format is mm/dd/yy.

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic selected_date="20150320">
  <widget class_="date" color_="#4bacc6" format_="type:date" 
label_="Select a date:" labelwidth_="150" name="hmadded__1" 
relpos_="150,149" textcolor_="#ffff00" value_="@selected_date"/>
  <widget class_="text" name="hmadded__2" relpos_="153,94" 
text_="Selected date: {@selected_date}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic start_date="20150405" end_date="20150523">
  <widget class_="date" color_="#5f497a" earliest_="20150401" format_="mm/dd/yyyy" 
label_="Select start date:" labelwidth_="150" latest_="20150601" name="hmadded__3" 
relpos_="107,88" textcolor_="#ffffff" tolabel_="Select end date" tolabelwidth_="150" 
tovalue_="@end_date" value_="@start_date"/>
  <widget class_="text" name="hmadded__4" relpos_="111,41" text_="Start date: {@start_date}"/>
  <widget class_="text" name="hmadded__5" relpos_="456,41" text_="End date: {@end_date}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic selected_date_from_query="20120515">
  <widget base_="pub.demo.retail.item" class_="date" color_="#4f81bd" 
label_="Select a date:" labelwidth_="150" name="hmadded__8" relpos_="137,129" 
textcolor_="#ffffff" value_="@selected_date_from_query">
    <tabu label="Tabulation on Sales Item Detail" breaks="date">
      <break col="date" sort="up"/>
      <tcol source="date" fun="cnt" label="Count"/>
    </tabu>
  </widget>
  <widget class_="text" name="hmadded__9" relpos_="140,90" 
text_="Selected date: {@selected_date_from_query}"/>
</dynamic>