Skip to main content
Version: 9.6

DatePicker

<div id="pg_date" 
    data-win-control="HFWinJSCtrl.DatePicker" 
    data-win-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 get deleted if 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 complettely.

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​

The value "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 with 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 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="datepicker_field_copy_source"
    data-win-control="HFWinJSCtrl.DatePicker"
    data-win-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 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​

<div id="pg_date" 
    data-win-control="HFWinJSCtrl.DatePicker" 
    data-win-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"
}