class_="date"

Using <widget class_="date"> creates an input field with an accompanying calendar widget for easier date selection.

Syntax

<dynamic datevar="">
    <widget class_="date" value_="@datevar" 
     label_="[LABEL_FOR_WIDGET]">
      [1010data_QUERY]
    </widget> 
</dynamic>

The [1010data_QUERY] may be specified between the opening and closing tags of the <widget>. The results of the query provide data for the <widget> to display.

Attributes

The attributes in this list are specific to widgets with class_="date".

value_
Specifies the variable, among those declared in the containing <dynamic> element, where information sent from the input field will be stored.
inputwidth_
Accepts an integer that specifies the width of the input field associated with the date widget.
label_
Accepts text that is used as a label for the widget.
labelpos_
Accepts a string that specifies the position of the label for the widget.

Valid values are:

  • left
  • right
  • top
  • bottom

The default is left.

labelwidth_
Accepts an integer that specifies the width of the label for the widget.

If the length of the string specified by the label_ attribute is greater than the value specified for labelwidth_, the text will wrap over multiple lines.

If the labelwidth_ attribute is not specified, the default width is the length of the string specified by the label_ attribute.

tovalue_
If specified, accepts a variable, among those declared in the containing <dynamic> element. Specifying this value creates a limited range of dates from which the end-user may choose. The earliest date in the range is the value provide to the value_ attributes. The latest available date is the value of tovalue_.
tolabel_
Accepts a string that specifies the label for the ending date field.
tolabelpos_
Accepts a string that specifies the position of the label for the ending date field.

Valid values are:

  • left
  • right
  • top
  • bottom

The default is left.

tolabelwidth_
Accepts an integer that specifies the width of the label for the ending date field.

If the length of the string specified by the tolabel_ attribute is greater than the value specified for tolabelwidth_, the text will wrap over multiple lines.

If the tolabelwidth_ attribute is not specified, the default width is the length of the string specified by the tolabel_ attribute.

arrange_
Accepts a string that specifies whether to arrange the two date pickers for a date range either horizontally or vertically.
Note: This attribute is only valid when the tovalue_ attribute is specified.

Valid values are:

h
Arrange the two date pickers for a date range horizontally.
v
Arrange the two date pickers for a date range vertically.
earliest_
Accepts an integer in the form of YYYYMMDD that specifies the earliest selectable date.
latest_
Accepts an integer in the form of YYYYMMDD that specifies the latest selectable date.
format_
Accepts a string specifying the format for displaying the date in the input field after an item is selected from the date picker.

Example strings for use are: mm/dd/yy and mm-dd-yy.

autoselect_
Accepts a 1 to activate and 0 to deactivate (default).

When active, autoselect_ will automatically reveal the date picker when the QuickApp user clicks in the date input field. When active, autoselect_ will also automatically assign a value to the variable specified in the value_ attribute when the date format entered matches the format specified in the format_ attribute (e.g., if format_="mm/dd/yy" then autocomplete_ will auto-update the variable if someone types 01/01/14).

(Available as of prod-9)

parseformats_
parseformats_ accepts a comma-separated list of valid 1010data date formats.

When a user types in a date picker widget's field, parseformats_ will be used to convert what the user types into a valid date value. It will also force the appearance of the date in the field into the format specified by the format_ attribute.

The default comma-separated list for parseformats_ is as follows: yyyy-mm-dd, mm/dd/yyyy, mm/dd/yy, yyyymmdd.

parseformats_ will use the first successful format it encounters in the comma-separated list. So, when using parseformats_, order matters, and incorrect conversions may occur if order is not considered. The correct way to provide formats is to list the formats from least strict to most strict.

For example, if parseformats_="mm/dd/yy,mm/dd/yyyy" and a user types 05/15/2012, then parseformats_ will convert it to: 05-15-20, because 05/15/2012 can be parsed with mm/dd/yy. To correct this, use: parseformats_="mm/dd/yyyy,mm/dd/yy". This also applies if using different delimiters. For instance, to account for both slash (/) and dash (-) delimiters, use: parseformats_="mm/dd/yyyy,mm-dd-yyyy,mm/dd/yy,mm-dd-yy".

(Available as of prod-9)

locale_
Accepts an optional culture code. The date widget will then use the culture's appropriate date format. If locale_ is omitted, the date widget uses the English, USA date format.
Valid values are:
  • en_US (English, USA--the default value)
  • en-CA (English, Canada)
  • fr-CA (French, Canada)

(Available as of version 15.24)

color_
Accepts a string that specifies the background color of the widget.

The color can be specified as any valid HTML color name, an RGB value, or a hex value.

textcolor_
Accepts a string that specifies the color of the text in the widget.

The color can be specified as any valid HTML color name, an RGB value, or a hex value.

textstyle_
Accepts a string that specifies the styling of the text for the widget.

Consists of a set of CSS key/value pairs (e.g., font-family:arial;font-weight:bold;font-size:14pt;).

maxrows_
Accepts an integer value that specifies the maximum number of rows in which the query associated with the widget can result.

If the query associated with the widget results in a number of rows that exceeds the value specified to maxrows_, then the widget produces an error.

The default value is 1000.

Example: Start date and end date

This example creates a date widget that provides two vertically arranged date pickers to select a date range. When a date is selected from the date picker, it is formatted as yyyy-mm-dd in the input field.

<dynamic fromvar="" tovar="">
  <widget class_="date" value_="@fromvar" tovalue_="@tovar" 
   label_="Starting date" labelwidth_="100" 
   tolabel_="Ending date" tolabelwidth_="100" 
   arrange_="v" format_="yyyy-mm-dd"/>
  <layout>
    <widget class_="text" text_="Starting date: {@fromvar}"/>
    <widget class_="text" text_="Ending date: {@tovar}"/>
  </layout>
</dynamic>

Example: French Canadian calendar

This example shows how to use the optional locale_ attribute to create a French Canadian date picker.

<dynamic d="20191215">
<widget class_="date" locale_="fr-CA" value_="@d"/>
</dynamic>

Example: Using grid for data selection

<dynamic base_="pub.demo.weather.hourly90" selecteddate="19900101" 
      begindate="19900101" enddate="19901231">
    <layout>
        <widget class_="date" margin_="10" label_="Select a date:" 
         format_="yymmdd" color_="white" textcolor_="#222" 
         textstyle_="font-weight:bold;" months_="1" fill_="none" 
         earliest_="19900101" latest_="19901231" 
         value_="@selecteddate" source_="0 0 0 0 0"/>
        <widget class_="text" margin_="10" type_="html" 
         text_="<div style='font:14px/20px sans-serif;'>Date selected: {@selecteddate}</div>" 
         source_="0 0 0 0 1"/>
        <widget class_="grid" width_="480" height_="320" source_="0 0 0 0 2">
            <sel value="(date={@selecteddate})"/>
        </widget>
        <widget class_="date" margin_="10" label_="Select a date range from:" 
         tolabel_="to:" color_="white" textcolor_="#222" 
         textstyle_="font-weight:bold;" earliest_="19900101" latest_="19901231" 
         months_="1" format_="yymmdd" value_="@begindate" 
         tovalue_="@enddate" source_="0 0 0 0 3"/>
        <widget class_="text" margin_="10" type_="html" 
         text_="<div style='font:14px/20px sans-serif;'>Date range selected: from  {@begindate} to {@enddate}</div>" 
         source_="0 0 0 0 4"/>
        <widget class_="grid" width_="480" height_="320" type_="native" 
         source_="0 0 0 0 5">
            <sel value="(date>={@begindate})"/>
            <sel value="(date<={@enddate})"/>
        </widget>
    </layout>
</dynamic>