@progress/kendo-angular-dateinputs 16.0.0-develop.19 → 16.0.0-develop.20

package/dateinput/dateinput.component.d.ts

@@ -57,6 +57,10 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * @hidden
      */
     caretAltUpIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    xIcon: SVGIcon;
     /**
      * @hidden
      */
@@ -70,6 +74,12 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * @hidden
      */
     set pickerType(_pickerType: DatePickerType);
+    /**
+     * If set to `true`, renders a clear button after the input text or DateInput value has been changed.
+     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+     * @default false
+     */
+    clearButton: boolean;
     /**
      * Sets or gets the `disabled` property of the DateInput and
      * determines whether the component is active
@@ -394,6 +404,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     };
     hasMousedown: boolean;
     focusedPriorToMousedown: boolean;
+    showClearButton: boolean;
     /**
      * @hidden
      */
@@ -476,6 +487,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
      * @hidden
      */
     writeValue(value: Date): void;
+    resetInput(): void;
     /**
      * @hidden
      */
@@ -531,6 +543,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private setComponentClasses;
     private setInputAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": "focusableId"; "pickerType": "pickerType"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "isRequired": "isRequired"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "enableMouseWheel": "enableMouseWheel"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "kendo-dateinput", ["kendo-dateinput"], { "focusableId": "focusableId"; "pickerType": "pickerType"; "clearButton": "clearButton"; "disabled": "disabled"; "readonly": "readonly"; "title": "title"; "tabindex": "tabindex"; "role": "role"; "ariaReadOnly": "ariaReadOnly"; "tabIndex": "tabIndex"; "isRequired": "isRequired"; "format": "format"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "max": "max"; "min": "min"; "rangeValidation": "rangeValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "incompleteDateValidation": "incompleteDateValidation"; "twoDigitYearMax": "twoDigitYearMax"; "enableMouseWheel": "enableMouseWheel"; "value": "value"; "spinners": "spinners"; "isPopupOpen": "isPopupOpen"; "hasPopup": "hasPopup"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "valueUpdate": "valueUpdate"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, false, never>;
 }
 export {};

package/dateinput/localization/messages.d.ts

@@ -16,6 +16,10 @@ export declare class DateInputMessages extends ComponentMessages {
      * The title of the **Increment** button of the DateInput.
      */
     increment: string;
+    /**
+     * The title of the **Clear** button of the DateInput.
+     */
+    clearTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DateInputMessages, "kendo-dateinput-messages-base", never, { "decrement": "decrement"; "increment": "increment"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DateInputMessages, "kendo-dateinput-messages-base", never, { "decrement": "decrement"; "increment": "increment"; "clearTitle": "clearTitle"; }, {}, never, never, false, never>;
 }

package/datepicker/datepicker.component.d.ts

@@ -68,6 +68,12 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     set cellTemplateRef(template: CellTemplateDirective);
+    /**
+     * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
+     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+     * @default false
+     */
+    clearButton: boolean;
     /**
      * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
      */
@@ -508,7 +514,6 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
      * @hidden
      */
     xIcon: SVGIcon;
-    private get inputElement();
     /**
      * @hidden
      */
@@ -690,5 +695,5 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerComponent, [null, null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "inputAttributes": "inputAttributes"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "popupSettings": "popupSettings"; "navigation": "navigation"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "adaptiveMode": "adaptiveMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatePickerComponent, "kendo-datepicker", ["kendo-datepicker"], { "focusableId": "focusableId"; "cellTemplateRef": "cellTemplate"; "clearButton": "clearButton"; "inputAttributes": "inputAttributes"; "monthCellTemplateRef": "monthCellTemplate"; "yearCellTemplateRef": "yearCellTemplate"; "decadeCellTemplateRef": "decadeCellTemplate"; "centuryCellTemplateRef": "centuryCellTemplate"; "weekNumberTemplateRef": "weekNumberTemplate"; "headerTitleTemplateRef": "headerTitleTemplate"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; "navigationItemTemplateRef": "navigationItemTemplate"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "activeView": "activeView"; "bottomView": "bottomView"; "topView": "topView"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "popupSettings": "popupSettings"; "navigation": "navigation"; "min": "min"; "max": "max"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "focusedDate": "focusedDate"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "disabledDates": "disabledDates"; "title": "title"; "subtitle": "subtitle"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "weekNumber": "weekNumber"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "adaptiveMode": "adaptiveMode"; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "close": "close"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate"], never, false, never>;
 }

package/datepicker/localization/messages.d.ts

@@ -28,6 +28,10 @@ export declare class DatePickerMessages extends ComponentMessages {
      * The title of the **Parent View** button in the header of the Calendar.
      */
     parentViewButtonTitle: string;
+    /**
+     * The title of the **Clear** button of the DatePicker.
+     */
+    clearTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DatePickerMessages, "kendo-datepicker-messages-base", never, { "today": "today"; "toggle": "toggle"; "prevButtonTitle": "prevButtonTitle"; "nextButtonTitle": "nextButtonTitle"; "parentViewButtonTitle": "parentViewButtonTitle"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatePickerMessages, "kendo-datepicker-messages-base", never, { "today": "today"; "toggle": "toggle"; "prevButtonTitle": "prevButtonTitle"; "nextButtonTitle": "nextButtonTitle"; "parentViewButtonTitle": "parentViewButtonTitle"; "clearTitle": "clearTitle"; }, {}, never, never, false, never>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -294,6 +294,12 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
      * @default false
      */
     allowCaretMode: boolean;
+    /**
+     * If set to `true`, renders a clear button after the input text or DateTimePicker value has been changed.
+     * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+     * @default false
+     */
+    clearButton: boolean;
     /**
      * When enabled, the DateTimePicker will autofill the rest of the date to the current date when the component loses focus.
      *
@@ -724,5 +730,5 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     private handleDateCompletenessChange;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "inputAttributes": "inputAttributes"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "kendo-datetimepicker", ["kendo-datetimepicker"], { "focusableId": "focusableId"; "weekDaysFormat": "weekDaysFormat"; "showOtherMonthDays": "showOtherMonthDays"; "value": "value"; "format": "format"; "twoDigitYearMax": "twoDigitYearMax"; "tabindex": "tabindex"; "disabledDates": "disabledDates"; "popupSettings": "popupSettings"; "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "readonly": "readonly"; "readOnlyInput": "readOnlyInput"; "cancelButton": "cancelButton"; "formatPlaceholder": "formatPlaceholder"; "placeholder": "placeholder"; "steps": "steps"; "focusedDate": "focusedDate"; "calendarType": "calendarType"; "animateCalendarNavigation": "animateCalendarNavigation"; "weekNumber": "weekNumber"; "min": "min"; "max": "max"; "rangeValidation": "rangeValidation"; "disabledDatesValidation": "disabledDatesValidation"; "incompleteDateValidation": "incompleteDateValidation"; "autoCorrectParts": "autoCorrectParts"; "autoSwitchParts": "autoSwitchParts"; "autoSwitchKeys": "autoSwitchKeys"; "enableMouseWheel": "enableMouseWheel"; "allowCaretMode": "allowCaretMode"; "clearButton": "clearButton"; "autoFill": "autoFill"; "adaptiveMode": "adaptiveMode"; "inputAttributes": "inputAttributes"; "defaultTab": "defaultTab"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "headerTemplateRef": "headerTemplate"; "footerTemplateRef": "footerTemplate"; "footer": "footer"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; }, ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate"], never, false, never>;
 }

package/datetimepicker/localization/messages.d.ts

@@ -88,6 +88,10 @@ export declare class DateTimePickerMessages extends ComponentMessages {
      * The label of the **Dayperiod** part in the TimePicker.
      */
     dayperiod: string;
+    /**
+     * The title of the **Clear** button of the DateTimePicker.
+     */
+    clearTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerMessages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DateTimePickerMessages, "kendo-datetimepicker-messages-base", never, { "toggle": "toggle"; "dateTab": "dateTab"; "dateTabLabel": "dateTabLabel"; "timeTab": "timeTab"; "timeTabLabel": "timeTabLabel"; "accept": "accept"; "acceptLabel": "acceptLabel"; "cancel": "cancel"; "cancelLabel": "cancelLabel"; "today": "today"; "now": "now"; "nowLabel": "nowLabel"; "prevButtonTitle": "prevButtonTitle"; "nextButtonTitle": "nextButtonTitle"; "parentViewButtonTitle": "parentViewButtonTitle"; "hour": "hour"; "minute": "minute"; "second": "second"; "millisecond": "millisecond"; "dayperiod": "dayperiod"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DateTimePickerMessages, "kendo-datetimepicker-messages-base", never, { "toggle": "toggle"; "dateTab": "dateTab"; "dateTabLabel": "dateTabLabel"; "timeTab": "timeTab"; "timeTabLabel": "timeTabLabel"; "accept": "accept"; "acceptLabel": "acceptLabel"; "cancel": "cancel"; "cancelLabel": "cancelLabel"; "today": "today"; "now": "now"; "nowLabel": "nowLabel"; "prevButtonTitle": "prevButtonTitle"; "nextButtonTitle": "nextButtonTitle"; "parentViewButtonTitle": "parentViewButtonTitle"; "hour": "hour"; "minute": "minute"; "second": "second"; "millisecond": "millisecond"; "dayperiod": "dayperiod"; "clearTitle": "clearTitle"; }, {}, never, never, false, never>;
 }

package/esm2020/dateinput/dateinput.component.mjs

@@ -19,7 +19,7 @@ import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent, attributeNames } from '../common/utils';
 import { Subscription } from 'rxjs';
-import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, caretAltUpIcon, xIcon } from '@progress/kendo-svg-icons';
 import { DateInput } from '@progress/kendo-dateinputs-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
@@ -83,10 +83,20 @@ export class DateInputComponent {
          * @hidden
          */
         this.caretAltUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.xIcon = xIcon;
         /**
          * @hidden
          */
         this.caretAltDownIcon = caretAltDownIcon;
+        /**
+         * If set to `true`, renders a clear button after the input text or DateInput value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -259,6 +269,7 @@ export class DateInputComponent {
         this.formatSections = { date: false, time: false };
         this.hasMousedown = false;
         this.focusedPriorToMousedown = false;
+        this.showClearButton = false;
         /**
          * @hidden
          */
@@ -696,6 +707,12 @@ export class DateInputComponent {
         this.kendoDateObject?.setValue(this.value);
         this.kendoDate?.refreshElementValue();
     }
+    resetInput() {
+        this.kendoDateObject?.setValue(null);
+        this.kendoDate?.refreshElementValue();
+        this.control?.setValue(null);
+        this.showClearButton = false;
+    }
     /**
      * @hidden
      */
@@ -711,6 +728,7 @@ export class DateInputComponent {
      */
     notify() {
         this.ngZone.run(() => {
+            this.showClearButton = true;
             this.onControlChange(cloneDate(this.value));
             this.valueChange.emit(cloneDate(this.value));
         });
@@ -758,6 +776,7 @@ export class DateInputComponent {
      * @hidden
      */
     handleButtonClick(offset) {
+        this.showClearButton = true;
         this.arrowDirection = Arrow.None;
         this.kendoDate.focus();
         this.kendoDate.modifyDateSegmentValue(offset);
@@ -783,6 +802,10 @@ export class DateInputComponent {
     }
     onWidgetInputEnd() {
         this.updateIncompleteValidationStatus();
+        if (this.clearButton) {
+            this.showClearButton = true;
+            this.cdr.markForCheck();
+        }
     }
     onWidgetFocus({ event: FocuseEvent }) {
         this.isActive = true;
@@ -869,7 +892,7 @@ export class DateInputComponent {
     }
 }
 DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.LocalizationService }, { token: i3.PickerService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
+DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateInputComponent, selector: "kendo-dateinput", inputs: { focusableId: "focusableId", pickerType: "pickerType", clearButton: "clearButton", disabled: "disabled", readonly: "readonly", title: "title", tabindex: "tabindex", role: "role", ariaReadOnly: "ariaReadOnly", tabIndex: "tabIndex", isRequired: "isRequired", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", steps: "steps", max: "max", min: "min", rangeValidation: "rangeValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", allowCaretMode: "allowCaretMode", autoFill: "autoFill", incompleteDateValidation: "incompleteDateValidation", twoDigitYearMax: "twoDigitYearMax", enableMouseWheel: "enableMouseWheel", value: "value", spinners: "spinners", isPopupOpen: "isPopupOpen", hasPopup: "hasPopup", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", valueUpdate: "valueUpdate", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-input": "this.wrapperClass", "class.k-dateinput": "this.wrapperClass", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateInputComponent), multi: true },
         { provide: L10N_PREFIX, useValue: 'kendo.dateinput' },
@@ -882,6 +905,9 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
 
         i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
         decrement="Decrease value"
+
+        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+        clearTitle="clear"
     >
     </ng-container>
     <input #dateInput
@@ -907,6 +933,21 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         }"
         [scope]="this"
         />
+    <span
+        *ngIf="clearButton && showClearButton"
+        class="k-clear-value"
+        [attr.title]="localization.get('clearTitle')"
+        role="button"
+        tabindex="-1"
+        (click)="resetInput()"
+        (mousedown)="$event.preventDefault()"
+    >
+        <kendo-icon-wrapper
+            name="x"
+            [svgIcon]="xIcon"
+        >
+        </kendo-icon-wrapper>
+    </span>
     <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
             #spinup
@@ -966,6 +1007,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
         i18n-decrement="kendo.dateinput.decrement|The label for the **Decrement** button in the DateInput"
         decrement="Decrease value"
+
+        i18n-clearTitle="kendo.dateinput.clearTitle|The title of the clear button"
+        clearTitle="clear"
     >
     </ng-container>
     <input #dateInput
@@ -991,6 +1035,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }"
         [scope]="this"
         />
+    <span
+        *ngIf="clearButton && showClearButton"
+        class="k-clear-value"
+        [attr.title]="localization.get('clearTitle')"
+        role="button"
+        tabindex="-1"
+        (click)="resetInput()"
+        (mousedown)="$event.preventDefault()"
+    >
+        <kendo-icon-wrapper
+            name="x"
+            [svgIcon]="xIcon"
+        >
+        </kendo-icon-wrapper>
+    </span>
     <span *ngIf="spinners" class="k-input-spinner k-spin-button" (mousedown)="$event.preventDefault()">
         <button
             #spinup
@@ -1037,6 +1096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], pickerType: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{

package/esm2020/dateinput/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class DateInputMessages extends ComponentMessages {
 }
 DateInputMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment" }, usesInheritance: true, ngImport: i0 });
+DateInputMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateInputMessages, selector: "kendo-dateinput-messages-base", inputs: { decrement: "decrement", increment: "increment", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputMessages, decorators: [{
             type: Directive,
             args: [{
@@ -22,4 +22,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], increment: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });

package/esm2020/datepicker/datepicker.component.mjs

@@ -42,13 +42,14 @@ import * as i3 from "../common/picker.service";
 import * as i4 from "../calendar/services/disabled-dates.service";
 import * as i5 from "@angular/common";
 import * as i6 from "../dateinput/dateinput.component";
-import * as i7 from "../calendar/calendar.component";
-import * as i8 from "../calendar/localization/calendar-custom-messages.component";
-import * as i9 from "@progress/kendo-angular-common";
-import * as i10 from "@progress/kendo-angular-icons";
-import * as i11 from "@progress/kendo-angular-navigation";
-import * as i12 from "@progress/kendo-angular-buttons";
-import * as i13 from "./localization/datepicker-localized-messages.directive";
+import * as i7 from "../dateinput/localization/dateinput-custom-messages.component";
+import * as i8 from "../calendar/calendar.component";
+import * as i9 from "../calendar/localization/calendar-custom-messages.component";
+import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "@progress/kendo-angular-icons";
+import * as i12 from "@progress/kendo-angular-navigation";
+import * as i13 from "@progress/kendo-angular-buttons";
+import * as i14 from "./localization/datepicker-localized-messages.directive";
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -73,6 +74,12 @@ export class DatePickerComponent {
          * @hidden
          */
         this.calendarIcon = calendarIcon;
+        /**
+         * If set to `true`, renders a clear button after the input text or DatePicker value has been changed.
+         * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
+         * @default false
+         */
+        this.clearButton = false;
         /**
          * Toggles the visibility of the Calendar footer.
          * @default false
@@ -570,9 +577,6 @@ export class DatePickerComponent {
             this.toggleCalendar(show);
         }
     }
-    get inputElement() {
-        return this.wrapper.nativeElement.querySelector('input');
-    }
     /**
      * @hidden
      */
@@ -777,6 +781,7 @@ export class DatePickerComponent {
      */
     handleChange(value) {
         this.cdr.markForCheck();
+        this.dateInput.showClearButton = true;
         this.value = value;
         if (this.show) {
             this.focusInput();
@@ -1074,7 +1079,7 @@ export class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PopupService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.PickerService }, { token: i4.DisabledDatesService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerComponent, selector: "kendo-datepicker", inputs: { focusableId: "focusableId", cellTemplateRef: ["cellTemplate", "cellTemplateRef"], clearButton: "clearButton", inputAttributes: "inputAttributes", monthCellTemplateRef: ["monthCellTemplate", "monthCellTemplateRef"], yearCellTemplateRef: ["yearCellTemplate", "yearCellTemplateRef"], decadeCellTemplateRef: ["decadeCellTemplate", "decadeCellTemplateRef"], centuryCellTemplateRef: ["centuryCellTemplate", "centuryCellTemplateRef"], weekNumberTemplateRef: ["weekNumberTemplate", "weekNumberTemplateRef"], headerTitleTemplateRef: ["headerTitleTemplate", "headerTitleTemplateRef"], headerTemplateRef: ["headerTemplate", "headerTemplateRef"], footerTemplateRef: ["footerTemplate", "footerTemplateRef"], footer: "footer", navigationItemTemplateRef: ["navigationItemTemplate", "navigationItemTemplateRef"], weekDaysFormat: "weekDaysFormat", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", bottomView: "bottomView", topView: "topView", calendarType: "calendarType", animateCalendarNavigation: "animateCalendarNavigation", disabled: "disabled", readonly: "readonly", readOnlyInput: "readOnlyInput", popupSettings: "popupSettings", navigation: "navigation", min: "min", max: "max", incompleteDateValidation: "incompleteDateValidation", autoCorrectParts: "autoCorrectParts", autoSwitchParts: "autoSwitchParts", autoSwitchKeys: "autoSwitchKeys", enableMouseWheel: "enableMouseWheel", allowCaretMode: "allowCaretMode", autoFill: "autoFill", focusedDate: "focusedDate", value: "value", format: "format", twoDigitYearMax: "twoDigitYearMax", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", tabindex: "tabindex", tabIndex: "tabIndex", disabledDates: "disabledDates", title: "title", subtitle: "subtitle", rangeValidation: "rangeValidation", disabledDatesValidation: "disabledDatesValidation", weekNumber: "weekNumber", size: "size", rounded: "rounded", fillMode: "fillMode", adaptiveMode: "adaptiveMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-datepicker": "this.wrapperClasses", "class.k-input": "this.wrapperClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => DatePickerComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => DatePickerComponent) },
@@ -1101,6 +1106,9 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
 
             i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
             parentViewButtonTitle="Navigate to parent view"
+
+            i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1109,6 +1117,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             pickerType="datepicker"
             hasPopup="grid"
             [isPopupOpen]="show"
+            [clearButton]="clearButton"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
@@ -1136,7 +1145,12 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1249,7 +1263,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i7.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i10.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i11.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i11.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i12.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i13.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "clearButton", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "isRequired", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "allowCaretMode", "autoFill", "incompleteDateValidation", "twoDigitYearMax", "enableMouseWheel", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { kind: "component", type: i7.DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages" }, { kind: "component", type: i8.CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: i9.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "directive", type: i10.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: i12.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i13.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i14.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1284,6 +1298,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
             i18n-parentViewButtonTitle="kendo.datepicker.parentViewButtonTitle|The title of the parent view button in the calendar header"
             parentViewButtonTitle="Navigate to parent view"
+
+            i18n-clearTitle="kendo.datepicker.clearTitle|The title of the clear button"
+            clearTitle="clear"
         >
         </ng-container>
         <kendo-dateinput
@@ -1292,6 +1309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             pickerType="datepicker"
             hasPopup="grid"
             [isPopupOpen]="show"
+            [clearButton]="clearButton"
             [disabled]="disabled"
             [readonly]="readonly || readOnlyInput"
             [ariaReadOnly]="readonly"
@@ -1319,7 +1337,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [value]="value"
             (valueChange)="handleInputChange($event)"
             (click)="handleDateInputClick()"
-        ></kendo-dateinput>
+        >
+            <kendo-dateinput-messages
+                [clearTitle]="localization.get('clearTitle')"
+            >
+            </kendo-dateinput-messages>
+        </kendo-dateinput>
         <button
             #toggleButton
             type="button"
@@ -1459,6 +1482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], cellTemplateRef: [{
                 type: Input,
                 args: ['cellTemplate']
+            }], clearButton: [{
+                type: Input
             }], inputAttributes: [{
                 type: Input
             }], monthCellTemplate: [{

package/esm2020/datepicker/localization/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export class DatePickerMessages extends ComponentMessages {
 }
 DatePickerMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle" }, usesInheritance: true, ngImport: i0 });
+DatePickerMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DatePickerMessages, selector: "kendo-datepicker-messages-base", inputs: { today: "today", toggle: "toggle", prevButtonTitle: "prevButtonTitle", nextButtonTitle: "nextButtonTitle", parentViewButtonTitle: "parentViewButtonTitle", clearTitle: "clearTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePickerMessages, decorators: [{
             type: Directive,
             args: [{
@@ -28,4 +28,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], parentViewButtonTitle: [{
                 type: Input
+            }], clearTitle: [{
+                type: Input
             }] } });