Skip to main content
Version: 9.6

TimePicker

<div id="repair_time_start" 
    data-win-control="HFWinJSCtrl.TimePicker" 
    data-win-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 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 complettely.

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​

The value "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 a 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-win-control="HFWinJSCtrl.TimePicker"
    data-win-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 behviour 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

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"
}