New to Kendo UI for Angular? Start a free 30-day trial

DatePickerOptions

The available configuration options for the DatePicker component, used internally in the recurrence editor.

activeView?

CalendarView

Defines the active view that the Calendar initially renders (see example). By default, the active view is month.

You have to set activeView within the topView-bottomView range.

bottomView?

CalendarView

Defines the bottommost Calendar view to which the user can navigate (see example).

disabledDates?

(date: Date) => boolean | Date[] | Day[]

Sets the dates of the DatePicker that will be disabled (see example).

disabledDatesValidation?

boolean

Determines whether the built-in validator for disabled date ranges is enforced when validating a form (see example).

focusedDate?

Date

Specifies the focused date of the Calendar component (see example).

format?

string

Specifies the date format that is used to display the input value (see example).

formatPlaceHolder?

DateInputFormatPlaceholder

Defines the descriptions of the format sections in the input field. (more information and examples).

max?

Date

Specifies the biggest valid date (see example).

min?

Date

Specifies the smallest valid date (see example).

navigation?

boolean

Sets or gets the navigation property of the Calendar and determines whether the navigation side-bar is displayed. (see example).

placeholder?

string

Specifies the hint the DatePicker displays when its value is null. (more information and examples).

popupSettings?

PopupSettings

Configures the popup options of the DatePicker.

The available options are:

  • animate: BooleanControls the popup animation. By default, the open and close animations are enabled.
  • popupClass: StringSpecifies a list of CSS classes that are used to style the popup.

readOnlyInput?

boolean

Sets the read-only state of the DatePicker input field (see example).

Note that if you set the readonly property value to true, the input will be rendered in a read-only state regardless of the readOnlyInput value.

readonly?

boolean

Sets the read-only state of the DatePicker (see example).

title?

string

Sets the title of the input element of the DatePicker.

topView?

CalendarView

Defines the topmost Calendar view to which the user can navigate (see example).

weekNumber?

boolean

Determines whether to display a week number column in the month view of the Calendar (see example).