Toolbar Datepicker properties

Usage

const data = [
    {
        type: "datePicker",
        id?: string | number,
        parent?: string,
        value?: string | Date,
        valueFormat?: string | "date",

        dateFormat?: string,
        disabledDates?: (date: Date) => boolean,
        icon?: string,
        label?: string,
        mark?: (date: Date) => string,
        mode?: "calendar" | "year" | "month" | "timepicker", // "calendar" by default
        placeholder?: string,
        thisMonthOnly?: boolean, // false by default
        timeFormat?: 24 | 12, // 24 by default
        timePicker?: boolean, // false by default
        weekNumbers?: boolean, // false by default
        weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default

        css?: string | string[],
        disabled?: boolean,
        editable?: boolean,
        hidden?: boolean,
        width?: string,
    },
    // more Toolbar controls
]

Description

• type - (required) the type of a control, set it to "datePicker", if not specified - the navItem type is applied by default
• id - (optional) the id of a control, auto-generated if not set
• parent - (optional) the parent of the item
• value - (optional) the value of a datepicker
• valueFormat - (optional) defines the format of the output date (either a string or a Date object)
• dateFormat - (optional) the format of dates, by default "%d/%m/%y", check the Calendar properties for more details. The date format must include delimiters (space or symbol), otherwise an error will be thrown
• disabledDates - (optional) allows disabling some date intervals, day labels are dimmed. Read the details
• icon - (optional) an icon for a Datepicker, the name of the icon from the used icon font
• label - (optional) specifies an AREA label for the control
• mark - (optional) adds a CSS class to specific days. Read the details
• mode - (optional) the mode of displaying of the datepicker every time the user opens it
• placeholder - (optional) a tip for the input
• thisMonthOnly - (optional) hides dates of the previous/next months relative to the currently displayed one
• timeFormat - (optional) defines the time format for a timepicker in the datepicker
• timePicker - (optional) adds a timepicker into the datepicker. Use the timeFormat property to define the format of displaying time in the timepicker
• weekNumbers - (optional) defines whether to show the numbers of weeks
• weekStart - (optional) sets the starting day of the week
• css - (optional) adds style classes to a Datepicker control
• disabled - (optional) defines whether a Datepicker control is disabled
• editable - (optional) allows a user to enter the value of the control manually; false by default
• hidden - (optional) defines whether a Datepicker is hidden
• width - (optional) the width of the field

Example

Change log:

• The following properties were added in v8.0:
  • valueFormat
  • disabledDates
  • mark
  • mode
  • thisMonthOnly
  • timeFormat
  • timePicker
  • weekNumbers
  • weekStart
  • editable

Related article: Datepicker