Skip to main content
Version: Upcoming 🦄

DatePicker

A DatePicker is a control element that allows the user to select a date from a calendar. It is based on the Kendo UI DatePicker. The date can be entered manually or selected from a calendar.

<div
    id="pg_date"
    data-hf-control="DatePicker"
    data-hf-options="{
        defaultValue: 'now',
        required: true,
        label: 'Date',
        emptyContent : 'Select...',
        list: true
    }"
></div>

FormControl Options​

Options of the kendo component are also available. read more

convertToLocalDate​

If set to true, the selected date is converted to the local date of the device.
How to use:
convertToLocalDate: 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') date. A Custom Code function can be used to set defaultValue.
How to use:
defaultValue: 'now'
Type: string | function
Signature: function() => string | Date

disableCalendar​

Set "true" whenever the DatePicker control calendar flyout should be disabled.
How to use:
disableCalendar: true
Type: boolean

disabled​

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

displayValueFormat​

To change the format of the displayed date. For more information visit: https://docs.telerik.com/kendo-ui/framework/globalization/dateformatting.
How to use:
displayValueFormat: 'dd.MM.yyyy'
Type: string

doNotCopy​

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

emptyContent​

Write a short word to indicate that the appropriate date can/must be chosen.
How to use:
emptyContent: 'Select ...'
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: 'Date'
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 date. With "now" the newest possible entry is the current day. Format for fixed dates is yyyy-MM-dd.
How to use:
max: 'now'
Type: string

min​

Set to allow entries from that date on. Format is yyyy-MM-dd.
How to use:
min: '1965-05-14'
Type: string
Default: 1900-01-01

mobilePicker​

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

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

parseFormats​

Used to give the user several format options to type in the date. "Converts" the date to format which is set with displayValueFormat.
How to use:
parseFormats: ['ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy']
Type: string[]

persistent​

It is the value where the "user" sets the initial value of the DatePicker 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

start​

Used to control which area the DatePicker view starts when opened. Allowed values: month / year / decade / century.
How to use:
start: 'decade'
Type: month | year | decade | century
Default: month

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: 'Please indicate at least one cause of damage.'
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="datepicker_field_copy_source"
    data-hf-control="DatePicker"
    data-hf-options="{
    label: 'DatePicker: source',
    displayValueFormat: 'dd.MM.yyyy',
    parseFormats: ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'd.M.yy', 'ddMMyy', 'd/M/yy', 'd-M-yy'],
    copyValueTo: [{
        targetId: 'datepicker_field_copy_target_1'
    }, {
        targetId: 'datepicker_field_copy_target_2',
        shadowPostfix: '_HFDate'
    }]
}"
></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="datepicker_field_copy_target"
    data-hf-control="DatePicker"
    data-hf-options="{
    label: 'DatePicker: source',
    displayValueFormat: 'dd.MM.yyyy',
    parseFormats: ['dd.MM.yyyy', 'ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'd.M.yy', 'ddMMyy', 'd/M/yy', 'd-M-yy'],
    copyValueFrom: 'datepicker_field_copy_source_1'
}"
></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

​

<div
    id="pg_date"
    data-hf-control="DatePicker"
    data-hf-options="{
        required: true,
        emptyContent : 'Select...' 
    }"
></div>

For each DatePicker inside your Forms there is one value pair of stored data. Date format according ISO 8601

{
    "id": "pg_date",
    "value": "2021-07-15T22:00:00.000Z"
}
{
    "id": "pg_date_HFDate",
    "value": "16. Jul. 2021"
}
{
    "id": "pg_date_HFLocal",
    "value": "2021-07-16T00:00:00.000+02:00"
}