Skip to main content
Version: 9.5

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

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