api_calendar_properties.md

sidebar_label	Form Datepicker properties
title	JavaScript Form - Datepicker Properties
description	You can explore the Properties of the Datepicker control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

Datepicker properties

Usage

{
    type: "datepicker",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set
    value?: Date | string,

    css?: string,
    disabled?: boolean, // false by default
    editable?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    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, // "string" by default
    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, must be unique if set, 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 CSS class 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) makes the label invisible
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

<iframe src="https://snippet.dhtmlx.com/q3yk7e6s?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>

Related article: DatePicker