Skip to main content

Datepicker properties

Usage​

{
    type: "datepicker",
    name?: string,
    id?: string,
    value?: Date | string,

    css?: string,
    disabled?: boolean,
    editable?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean,
    padding?: string | number,
    required?: boolean, // false by default
    validation?: (input: string | Date) => boolean,
    width?: string | number | "content", // "content" by default

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

    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "left" | "top", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,
}

Description​

type(required) the type of a control, set it to "datepicker"
name(optional) the name of a control
id(optional) the id of a control, auto-generated if not set
value(optional) the value of a datepicker
css(optional) adds style classes to a control
disabled(optional) defines whether a control is enabled (false) or disabled (true)
editable(optional) allows a user to enter the value of the control manually, false by default
height(optional) the height of a control
hidden(optional) defines whether a control is hidden
padding(optional) sets padding between a cell and a border of a DatePicker control
required(optional) defines whether a control is required
validation(optional) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
width(optional) the width of a control
date(optional) defines the date that will be opened when the calendar is created, differs from the selected date (set by value)
dateFormat(optional) defines the format of dates in the calendar, "%d/%m/%y" by default. 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
icon(optional) the name of an icon from the used icon font
mark(optional) allows adding a CSS class to specific days
mode(optional) specifies the mode of displaying a calendar: "calendar" (default), "month", "year"
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 of a timepicker: 12-hour or 24-hour (12 or 24 (default), correspondingly)
timePicker(optional) adds a timepicker into a calendar, false by default
valueFormat(optional) defines the format of the value that will be returned while getting the current value of the control: "string" (default) or "Date"
weekNumbers(optional) defines whether to show the numbers of weeks, false by default
weekStart(optional) sets the starting day of the week: "saturday", "monday" or "sunday" (default)
hiddenLabel(optional) invisible label that will be used to identify the input on the server side
label(optional) specifies a label for a control
labelPosition(optional) defines the position of a label: "left"|"top"
labelWidth(optional) sets the width of the label of a control
helpMessage(optional) adds a help message to a control
preMessage(optional) a message that contains instructions for interacting with the control
successMessage(optional) a message that appears in case of successful validation of the control value
errorMessage(optional) a message that appears in case of error during validation of the control value

Example​

Related article: DatePicker