<Stn:DateTimePicker Name='StartDateTime'>
Description
The DateTimePicker control is used for date and time input in the user interface. Currently, it can be used to set the start and end times of a purchase.
DateTimePicker has pre-defined sub-element input controls for year, month, day, hour, and minute. The pre-defined sub-elements are of the type IntegerInputBox with the names “Year”, “Month”, “Day”, “Hour”, and “Minute”. All IntegerInputBox controls, with their set values, form a whole date.
Currently, the two OnStepToEndDate and OnSetStartDate button click-functions can extract the date formed by the different pre-defined IntegerInputBox controls. The button with the click-function must be located in the same panel as the DateTimePicker control.
The two button click-functions, OnSetNextInputControl and OnSetPreviousInputControl can be used to change focus between the different IntegerInputBox controls within the DateTimePicker control.
Properties
Height
| Type: | Unsigned integer. Value range 0 – 128. |
| Description: | Defines the date time picker height on the display. |
Location
| Type: | String in format “X,Y” where X and Y are both unsigned integers. |
| Value: | Value range for X is 0 – 260 Value range for Y is 0 – 128. |
| Description: | Specifies where the date time picker control shall be placed in relation to the parent control. If a date time picker is defined in a panel, the Location property will specify where inside the panel the date time picker will be positioned. The physical location on the display will then depend on where the panel is placed (each panel also has a Location property) and where the image is placed. |
Name
| Type: | A string of any length |
| Description: | The name of the DateTimePicker control. The name must be unique within a panel. |
Width
| Type: | Unsigned integer. Value range 0 – 260. |
| Description: | The width of the date time picker on the display. |
Control information
Five different IntegerInputBox controls (see IntegerInputBox (STN) ) must be defined within the DateTimePicker control for input of year, month, day, hour and minute. These controls are used for input of the integer value for each field. The Name property of an IntegerInputBox must be set to “Year” for year input, “Month” for month input, “Day” for day input, “Hour” for hour input and “Minute” for minute input.
Each IntegerInputBox must have the TabOrder property set according to the input order of the fields. When OnSetNextInputControl Button click-action is executed it will switch focus to the input field that is next in TabOrder. If the IntegerInputBox in focus has TabOrder 1 when OnSetNextInputControl is executed from a button click, the focus will switch to an IntegerInputBox with TabOrder 2.
The DateTimePicker control also has a feature to display the selected date and time in one or more labels defined as sub-controls in the DateTimePicker. If a label is defined inside DateTimePicker, and “D1” is set as FormattedText, the label will show the selected date.
To achieve a proper initialization of the date and time values, the DateTimePicker shall only be defined in panels that are opened with the OnOpenDatePanel click action.
Sub-elements
The DateTimePicker control has one sub-element named Controls that is used to define the IntegerInputBoxes that are used for input.
Examples
Example setup of a DateTimePicker control with Year, Month, Day, Hour and Minute input. Buttons to increase and decrease the value in each input are also included as well as buttons to switch IntegerInputBox:
<Stn:DateTimePicker Name='StartDateTime'
Location='70,40' Width='100' Height='50'>
<Controls>
<Stn:IntegerInputBox Name='Year'
Location ='0,0' Width='24' Height='13'
MinimumLength='4' MaximumLength='4' MinValue='0'
MaxValue='3000' TabOrder='1' Format='' Alignment='Center'/>
<Stn:Label Name='Dash1' Text='-' Location='24,0' Width='4'
Height='13' Alignment='Center'/>
<Stn:IntegerInputBox Name='Month' Location ='28,0' Width='14'
Height='13' MinimumLength='2' MaximumLength='2' MinValue='1'
MaxValue='12' TabOrder='2' Format='D2' Alignment='Center'/>
<Stn:Label Name='Dash2' Text='-' Location='42,0' Width='4'
Height='13' Alignment='Center'/>
<Stn:IntegerInputBox Name='Day' Location ='46,0' Width='14'
Height='13' MinimumLength='2' MaximumLength='2' MinValue='1'
MaxValue='31' TabOrder='3' Format='D2' Alignment='Center'/>
<Stn:IntegerInputBox Name='Hour' Location ='86,0' Width='12'
Height='13' MinimumLength='2' MaximumLength='2' MinValue='1'
MaxValue='24' TabOrder='4' Format='D2' Alignment='Center'/>
<Stn:Label Name='Dash2' Text=':' Location='98,0' Width='3'
Height='13' Alignment='Center'/>
<Stn:IntegerInputBox Name='Minute' Location ='101,0' Width='12'
Height='13' MinimumLength='2' MaximumLength='2' MinValue='1'
MaxValue='59' TabOrder='5' Format='D2' Alignment='Center'/>
<Stn:Label Name='SelectedLabel' Location='0,16' Width='80'
Height='13' FormattedText='Selected weekday:'/>
<Stn:Label Name='SelectedWeekDayLabel' Location='81,16' Width='45'
Height='13' FormattedText='d1' FormattingInfo='dddd'/>
</Controls>
</Stn:DateTimePicker>
<Stn:Button Name='Next' Text='Next' ButtonLocationName='RightTwo'
Click='OnSetNextInputControl'/>
<Stn:Button Name='Previous' Text='Prev'
Click='OnSetPreviousInputControl'/>
<Stn:Button Name='PlusOneButton' Text='+1' KeyValue='+1'
ButtonLocationName='RightThree' Click='OnKeyAddText' />
<Stn:Button Name='MinusOneButton' Text='-1' KeyValue='-1'
ButtonLocationName='LeftThree' Click='OnKeyAddText' />
