<TFT:DateTimePicker Name='TestPicker'
Description
The DateTimePicker control is used for date and time input in the user interface. Currently, it can be used to set the start time and end time of a purchase.
DateTimePicker control has pre-defined sub-element input controls for year, month, day, hour and minute. These sub-elements are of the type IntegerInputBox with the names “Year”, “Month”, “Day”, “Hour”, and “Minute”. All IntegerInputBox controls with their values form a whole date.
Currently, the two button-click functions OnStepToEndDate and OnSetStartDate can extract the date formed by the pre-defined IntegerInputBox controls. The button with the click function must be positioned in the same panel as the DateTimePicker control.
The two button-click functions OnSetNextInputControl and OnSetPreviousInputControl can be used within the DateTimePicker control to change focus between the different IntegerInputBox controls.
It can be tricky to add the DateTimePicker in the flow when having automatic panel changes due to PAT selection and Code Input
In the CodeInputPanel, put OnStoreCodeInput in the style and the OnOpenDatePanel on the button. Otherwise it would switch to the date panel first and then try to read the code input from that panel.
Then, in date panel add OnCodeInputDone.
You also need to add a OnStepTimeAmountDone button in the step panel, because the AcceptButton will never be visible when you have step and only coin.
Properties
BackColor
Type/Value: A string with a valid colour name
Description:Defines the background colour of the DateTimePicker. The background will be filled with this colour. See Colour names for a list of available colours.
Height
Type/Value: Unsigned integer. Value range 0–480.
Description:Defines the height of the DateTimePicker on the display.
Location
Type/Value: String in format “X,Y” where X and Y are both unsigned integers. Value range for X is 0–640 and value range for Y is 0–480.
Description:The Location property specifies where the DateTimePicker shall be placed in relation to the parent control. If DateTimePicker is defined in a panel, the Location property will specify where inside the panel the DateTimePicker will be positioned. Thus the position on the display depends on the position of the panel (panels also have a Location property) and where the image is placed within the panel.
Name
Type/Value: A string of any length
Description:The name of the DateTimePicker control. It is important that the name is unique within a panel.
Size
Type/Value: String in format “A,B” where A and B are both unsigned integers.
Value range for A is 0–640
Value range for B is 0–480.
Description:Defines both the height and the width of the DateTimePicker with one property. Example: “640,480” sets the width to 640 pixels and the height to 480 pixels.
Transparent
Type/Value: Boolean value, use “true” or “false”
Description:To make the DateTimePicker transparent set this property to “true”. This will display the parent panel background as background in the DateTimePicker as if its background is transparent.
Set to "false" to render the DateTimePicker background in the solid colour specified in the BackColor property.
Width
Type/Value: Unsigned integer. Value range 0–640.
Description:Defines the width of the DateTimePicker on the display.
Control information
Inside the DateTimePicker control five different IntegerInputBoxes must be defined for input of year, month, day, hour and minute. These controls are used for input of the integer values for each field. The Name property of each IntegerInputBox must be set to “Year”, “Month”, “Day”, “Hour” and “Minute” respectively.
Each IntegerInputBox must have the TabOrder property set according to the order in which the fields should be filled in. When the OnSetNextInputControl button-click action is executed it will switch the 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 the 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 control. If a label is defined inside the DateTimePicker control and “D1” is set as FormattedText , (see Dynamic label text ) the label will show the selected date.
To get 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 and that is used to define the IntegerInputBox control used for input.
Controls
Description:The Controls sub-element contains all sub controls of the DateTimePicker. The Controls sub-element will contain all other user interface controls that are needed for the DateTimePicker to work.
Examples
Example setup of a DateTimePicker control with Year, Month, Day, Hour, and Minute input. Two buttons are defined to step the value up and down in each IntegerInputBox by using OnKeyboardHit with the special KeyValue “+1” and “-1” that are handled by the IntegerInputBox as an addition and subtraction of 1:
<TFT:DateTimePicker Name='TestPicker' Location='25,50' Size='600,150'
Transparent='true'>
<Controls>
<TFT:Label Name ='YearLabel' FormattedText='YearLabel' Size='80,30'
Location='0,0' Transparent='true'
Font='Tahoma, 16pt, style=Bold'/>
<TFT:IntegerInputBox Name='Year' BackColor='White'
FocusedColor='Gray' Location ='0,35' Width='80' Height='50'
MinimumLength='4' MaximumLength='4' MinValue='1' MaxValue='3000'
Format='D4' Alignment='Center'
Font='Tahoma, 18pt, style=Bold' TabIndex='1'/>
<TFT:Label Name ='MonthLabel' FormattedText='MonthLabel'
Size='80,30' Location='90,0'
Transparent='true' Font='Tahoma, 16pt, style=Bold'/>
<TFT:IntegerInputBox Name='Month' BackColor='White'
FocusedColor='Gray' Location ='90,35' Width='80' Height='50'
MinimumLength='2' MaximumLength='2' MinValue='1' MaxValue='12'
Format='D2' Alignment='Center'
Font='Tahoma, 18pt, style=Bold' TabIndex='2'/>
<TFT:Label Name ='DayLabel' FormattedText='DayLabel' Size='80,30'
Location='180,0' Transparent='true'
Font='Tahoma, 16pt, style=Bold'/>
<TFT:IntegerInputBox Name='Day' BackColor='White' ocusedColor='Gray'
Location ='180,35' Width='80' Height='50' MinimumLength='2'
MaximumLength='2' MinValue='1' MaxValue='31' Format='D2'
Alignment='Center'
Font='Tahoma, 18pt, style=Bold' TabIndex='3'/>
<TFT:Label Name ='HourLabel' FormattedText='HourLabel' Size='80,30'
Location='270,0' Transparent='true'
Font='Tahoma, 16pt, style=Bold'/>
<TFT:IntegerInputBox Name='Hour' BackColor='White'
FocusedColor='Gray' Location ='270,35' Width='80' Height='50'
MinimumLength='2' MaximumLength='2' MinValue='1' MaxValue='24'
Format='D2' Alignment='Center'
Font='Tahoma, 18pt, style=Bold' TabIndex='4'/>
<TFT:Label Name ='MinuteLabel' FormattedText='MinuteLabel'
Size='80,30' Location='360,0'
Transparent='true' Font='Tahoma, 16pt, style=Bold'/>
<TFT:IntegerInputBox Name='Minute' BackColor='White'
FocusedColor='Gray' Location ='360,35' Width='80' Height='50'
MinimumLength='2' MaximumLength='2' MinValue='1' MaxValue='59'
Format='D2' Alignment='Center'
Font='Tahoma, 18pt, style=Bold' TabIndex='5'/>
<TFT:Button Name='UpButton' FormattedText='+' Alignment='Center'
MxStyle='{FunctionButtonStyle}' Location='450, 0' KeyValue='+1'
Click='OnKeyboardHit'/>
<TFT:Button Name='Downbutton' FormattedText='-' Alignment='Center'
MxStyle='{FunctionButtonStyle}' Location='450, 50' KeyValue='-1'
Click='OnKeyboardHit'/>
</Controls>
</TFT:DateTimePicker>
