The timepicker control

Usage

<timepicker
  id='id'
  width='width'
  label='label'
  seconds='seconds'
  invalidTimeMessage='invalidTimeMessage'
  timeFormat='timeFormat'
  step='step'/>

Fields

Field	Description
id	Identifies the control when it is referenced in data-binding queries, reports, and workflow scripts.
width	Specifies how wide a control will be displayed in the form.
timeFormat	A dtf time format to display and parse the input time. Cannot contain a date format pattern.
step	The time interval, in minute units, between the time options that the control displays in a drop-down list. Its default value is 30.

Properties

Property	Type	Description
label (read-only)	string	Specifies the text that will be displayed as the label of the control.
seconds (submitted)	int	Used to set the displayed time or access the user input in the control.
invalidTimeMessage	string	The error message displayed next to the control if the user input cannot be parsed as a time of day. The default message is `"Invalid time"`.

Traits

Trait	Description
validation	A collection of zero or more validation rules (validator elements) that evaluate user input in the control at runtime, and prevent the user from submitting the form if the `cond` of any of the validators evaluates to `false`.
declarations	A collection of zero or more variable declarations (let elements) that can be referenced in solution-wide query expressions.

Remarks

When the timepicker control receives focus, a drop-down list of time choices is displayed. Users can select a time of day by clicking one of the choices, or by entering a string into the control.

The step property specifies the valid increments for time selection, and so determines the choices displayed in the drop-down list of the control. It does not, however, affect the manual user input in the timepicker.

Even though the step property allows fifteen-minute intervals for the time selection, any string input that conforms to the timeFormat is allowed

Figure 260. Even though the step property allows fifteen-minute intervals for the time selection, any string input that conforms to the timeFormat is allowed

The timeFormat field may only contain tokens related to the time pattern: HH or H for the hour portion, mm or m for the minute portion, and ss or s for the second portion, separated by one or more optional string literals.

If the input in the control does not parse as a time of day with the format specified in the timeFormat field, the validation message specified in the invalidTimeMessage is displayed next to the control, and included in the validation summary.

The value of the seconds property represents the time elapsed since midnight, in seconds, and so can range between 0 and 86399. seconds evaluates to NULL if there is no input, or the input cannot be parsed as a time of day.

You can combine the date property of a datepicker control and the seconds property of a timepicker control to put together a complete dtl value by passing the properties to the ADDSECOND() function.

datepickerSample.fls.xml

...
<datepicker id='datepicker'
  label='This is where your label goes'
  date='{(dtl 2015-03-30T00:00:00)}'
  dateFormat='(dtf yyyy "-" MM "-" dd)'
  invalidDateMessage='Your custom validation message.'/>
<chapter title="Combining a datepicker
                and a timepicker
                for a complete datetime value">
  <timepicker id="timepicker"
    label="Timepicker label here"
    invalidTimeMessage="That doesn't make sense."
    timeFormat='(dtf HH":"mm)' step="15"/>
  <textview text='{FORMATDTL(
                  (ADDSECOND(datepicker.date,timepicker.seconds)),
                  (dtf yyyy"-"MM"-"dd" "HH":"mm))}'/>
</chapter>

Figure 261. The textview in the screenshot displays the combined date that the user selected in the datepicker and the timepicker

Sample

timepickerSample.fls.xml

<form id='timepickerSample'
  menuName='Timepicker sample'
  platforms='web'
  xmlns='http://schemas.mobilengine.com/fls/v1'>
  <timepicker id="bingeStart"
    label="When do you plan starting your binge-watch today?"
    invalidTimeMessage="That doesn't make sense."
    timeFormat='(dtf HH":"mm)'
    step="15"/>
  <timepicker id="bingeStop"
    label="When do you plan to stop?"
    invalidTimeMessage="That doesn't make sense."
    timeFormat='(dtf HH":"mm)'
    step="15">
    <validation>
      <validator
        cond='{((86399-timepickerSample.bingeStart.seconds)
                -(86399-bingeStop.seconds))
               >18000}'
        message="You call that binge-watching?"/>
    </validation>
  </timepicker>
</form>

Two timpeicker controls with a step of 15 minutes, and a validator that detects if the difference between the two selected times is below a certain limit

A workflow script running in the Mobilengine Cloud would access the submission of the webform above in the format below:

{...
  bingeStart: {seconds: 900},
  bingeStop: {seconds: 27900}
...}

See the workflow script reference guide for more details on data type mapping.

Developer Documentation

Controls overview