Skip to main content
Version: Upcoming 🦄

TimePicker

The TimePicker is a control element that allows the user to select a time. It is based on the Kendo UI TimePicker.

<div id="repair_time_start" 
    data-hf-control="TimePicker" 
    data-hf-options="{
        defaultValue: 'now',
        required: true,
        label: 'Time start'
    }"></div>

FormControl Options​

Options of the kendo component are also available. read more

convertToLocalTime​

If set to true, the selected time is converted to the local time of the device's time zone.
How to use:
convertToLocalTime: true
Type: boolean

copyValueTo​

Copy value to specified FormControls.
How to use:
copyValueTo: ...
Type: CopyValueToType

defaultValue​

Use the value "now" to offer the current ('local') time. The format is hh:mm. A Custom Code function can be used to set defaultValue.
How to use:
defaultValue: 'now'
Type: string | function
Signature: function() => string | Date

disabled​

Set "true" whenever the TimePicker should be disabled.
How to use:
disabled: true
Type: boolean

doNotCopy​

Set "true" whenever the field should get deleted if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

emptyContent​

Write a short word to indicate that the appropriate time can/must be chosen.
How to use:
emptyContent: 'hh:mm'
Type: string

format​

Specifes the used time format. hh:mm using 12-hour clock, tt shows the AM/PM designator and HH:mm using 24-hour clock. For more information visit: https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting.
How to use:
format: 'hh:mm tt'
Type: string

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

label​

Define a label for your control element.
How to use:
label: 'Time start'
Type: string

list​

Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the listTemplate) or it should show up in Admin UI listings.
How to use:
list: true
Type: boolean

listOptions​

Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
How to use:
listOptions: {...}
Type: { dialogText: string, dialogHide: boolean }

max​

Set to allow entries up to until this time. Format is HH:mm.
How to use:
max: '19:00'
Type: string

min​

Set to allow entries from that time on. Format is HH:mm.
How to use:
min: '09:00'
Type: string

mobilePicker​

Use native Time Picker on mobile devices. There are settings restrictions e.g. formatting or start interval.
How to use:
mobilePicker: true
Type: boolean

modernType​

Use classic TimePicker view by setting this option to false.
How to use:
modernType: false
Type: boolean
Default: true

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes.
How to use:
onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: Date) => void

persistent​

It is the value where the "user" sets the initial value of the TimePicker to the value of the previous Form Item of the current user and overwrites any defaultValue.
How to use:
persistent: 'user'
Type: 'user'

required​

Set "true" if the control has to be filled in.
How to use:
required: true
Type: boolean

tooltip​

Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur.
How to use:
tooltip: 'Fill in the time you started.'
Type: string

tooltipTemplate​

Write an ID of an HTML container to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the content of the container will occur.
How to use:
tooltipTemplate: 'example_control_tooltip'
Type: string

visiting​

Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form field.
How to use:
visiting: true
Type: boolean

listOptions Object​

dialogHide​

Hide field from filter/sort/group dialogs.
How to use:
dialogHide: true
Type: boolean

dialogText​

Set custom label for filter/sort/group dialogs.
How to use:
dialogText: 'Display Text'
Type: string

copyValueTo​

Define FormControls in which the entered value should be copied.

Example
<div id="timepicker_field_copy_source"
    data-hf-control="TimePicker"
    data-hf-options="{
        label: 'TimePicker: source',
        copyValueTo: [{
            targetId: 'timepicker_field_copy_target_1'
        }, {
            targetId: 'timepicker_field_copy_target_2',
            shadowPostfix: '_HFTime'
        }]
    }"></div>
Option interface
interface ICopyValueToObject {
    targetId: string;
    mode: 'overwrite' | null;
    shadowPostfix: string;
    callback: (value: string) => string;
}

type CopyValueToType = string | ICopyValueToObject | Array<string | ICopyValueToObject>;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

shadowPostfix​

Specify which shadow field is copied.
How to use:
shadowPostfix: '_HFNumericField'
Type: string

targetId​

Specify target id
How to use:
targetId: 'target_id'
Type: string

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<div id="timepicker_field_copy_target"
    data-hf-control="TimePicker"
    data-hf-options="{
        label: 'TimePicker: target',
        copyValueFrom: 'repair_time_start'
    }"></div>
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

sourceId​

Specify source id
How to use:
sourceId: 'target_id'
Type: string

Stored data​

{
    "id": "repair_time_start",
    "value": "2021-08-04T12:30:00.000Z"
}
{
    "id": "repair_time_start_HFTime",
    "value": "14:30"
}
{
    "id": "repair_time_start_HFLocal",
    "value": "2021-08-04T14:30:00.000+02:00"
}