@progress/kendo-angular-dateinputs 16.0.0-develop.9 → 16.0.1-develop.1

package/esm2020/calendar/view-list.component.mjs

@@ -44,6 +44,7 @@ export class ViewListComponent {
         this.disabled = false;
         this.showFooter = false;
         this.weekDaysFormat = 'short';
+        this.cellEnter = new EventEmitter();
         this.cellClick = new EventEmitter();
         this.weekNumberCellClick = new EventEmitter();
         this.activeDateChange = new EventEmitter();
@@ -192,10 +193,11 @@ export class ViewListComponent {
         }
     }
 }
-ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", weekNumber: "weekNumber" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+ViewListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewListComponent, deps: [{ token: i1.BusViewService }, { token: i0.ChangeDetectorRef }, { token: i2.IntlService }, { token: i3.CalendarDOMService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: { allowReverse: "allowReverse", cellTemplateRef: "cellTemplateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitleTemplateRef: "headerTitleTemplateRef", headerTemplateRef: "headerTemplateRef", footerTemplateRef: "footerTemplateRef", showOtherMonthDays: "showOtherMonthDays", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", isActive: "isActive", min: "min", max: "max", selectedDates: "selectedDates", tabIndex: "tabIndex", disabled: "disabled", id: "id", showFooter: "showFooter", weekDaysFormat: "weekDaysFormat", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", size: "size", weekNumber: "weekNumber" }, outputs: { cellEnter: "cellEnter", cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", activeDateChange: "activeDateChange", todayButtonClick: "todayButtonClick", pageChange: "pageChange", focusCalendar: "focusCalendar", blurCalendar: "blurCalendar", focusedCellChange: "focusedCellChange" }, host: { properties: { "class.k-vstack": "this.getComponentClass", "class.k-calendar-view": "this.getComponentClass", "class.k-calendar-monthview": "this.getComponentMonthClass", "class.k-calendar-yearview": "this.getComponentYearClass", "class.k-calendar-decadeview": "this.getComponentDecadeClass", "class.k-calendar-centuryview": "this.getComponentCenturyClass" } }, viewQueries: [{ propertyName: "virtualization", first: true, predicate: VirtualizationComponent, descendants: true }, { propertyName: "headerComponent", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -240,6 +242,9 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -256,6 +261,7 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -265,8 +271,8 @@ ViewListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         [activeViewValue]="activeViewValue"
         [currentDate]="activeDate">
     </kendo-calendar-footer>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.ViewComponent, selector: "[kendoCalendarView]", inputs: ["showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: i9.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewListComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { kind: "component", type: i6.HeaderComponent, selector: "kendo-calendar-header", inputs: ["activeView", "currentDate", "min", "max", "rangeLength", "titleTemplateRef", "headerTemplateRef", "isPrevDisabled", "isNextDisabled", "showNavigationButtons", "orientation", "id", "size"], outputs: ["todayButtonClick", "prevButtonClick", "nextButtonClick"] }, { kind: "component", type: i7.FooterComponent, selector: "kendo-calendar-footer", inputs: ["footerTemplateRef", "activeViewValue", "currentDate"] }, { kind: "component", type: i8.ViewComponent, selector: "[kendoCalendarView]", inputs: ["allowReverse", "showOtherMonthDays", "direction", "isActive", "activeView", "cellUID", "focusedDate", "viewDate", "activeRangeEnd", "selectionRange", "min", "max", "selectedDates", "weekNumber", "viewIndex", "templateRef", "weekNumberTemplateRef", "headerTitle"], outputs: ["cellClick", "weekNumberCellClick", "cellEnter", "cellLeave", "focusedCellId"] }, { kind: "component", type: i9.VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewListComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -274,6 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     template: `
     <kendo-calendar-header
         [currentDate]="activeDate"
+        [size]="size"
         [min]="min"
         [max]="max"
         [id]="id"
@@ -318,6 +325,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             <tbody class="k-calendar-tbody"
                    *kFor="let date of dates"
                    kendoCalendarView
+                   [allowReverse]="allowReverse"
+                   [activeRangeEnd]="activeRangeEnd"
+                   [selectionRange]="selectionRange"
                    [showOtherMonthDays]="showOtherMonthDays"
                    [headerTitle]="headerTitle"
                    role="rowgroup"
@@ -334,6 +344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                    (cellClick)="cellClick.emit($event)"
                    (weekNumberCellClick)="weekNumberCellClick.emit($event)"
                    (focusedCellId)="focusedCellChange.emit($event)"
+                   (cellEnter)="cellEnter.emit($event)"
             ></tbody>
         </table>
     </kendo-virtualization>
@@ -345,7 +356,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </kendo-calendar-footer>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { cellTemplateRef: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i0.ChangeDetectorRef }, { type: i2.IntlService }, { type: i3.CalendarDOMService }, { type: i0.Renderer2 }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], cellTemplateRef: [{
                 type: Input
             }], weekNumberTemplateRef: [{
                 type: Input
@@ -381,8 +394,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], weekDaysFormat: [{
                 type: Input
+            }], activeRangeEnd: [{
+                type: Input
+            }], selectionRange: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], weekNumber: [{
                 type: Input
+            }], cellEnter: [{
+                type: Output
             }], cellClick: [{
                 type: Output
             }], weekNumberCellClick: [{

package/esm2020/calendar/view.component.mjs

@@ -168,7 +168,8 @@ export class ViewComponent {
             selectionRange: this.selectionRange,
             viewDate: viewDate,
             isDateDisabled: this.disabledDatesService.isDateDisabled,
-            direction: this.direction
+            direction: this.direction,
+            allowReverse: this.allowReverse
         });
     }
     intlChange() {
@@ -233,8 +234,8 @@ export class ViewComponent {
         return this.data[rowIndex][cellIndex];
     }
 }
-ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
-ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
+ViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewComponent, deps: [{ token: i1.BusViewService }, { token: i2.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i3.DisabledDatesService }], target: i0.ɵɵFactoryTarget.Component });
+ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewComponent, selector: "[kendoCalendarView]", inputs: { allowReverse: "allowReverse", showOtherMonthDays: "showOtherMonthDays", direction: "direction", isActive: "isActive", activeView: "activeView", cellUID: "cellUID", focusedDate: "focusedDate", viewDate: "viewDate", activeRangeEnd: "activeRangeEnd", selectionRange: "selectionRange", min: "min", max: "max", selectedDates: "selectedDates", weekNumber: "weekNumber", viewIndex: "viewIndex", templateRef: "templateRef", weekNumberTemplateRef: "weekNumberTemplateRef", headerTitle: "headerTitle" }, outputs: { cellClick: "cellClick", weekNumberCellClick: "weekNumberCellClick", cellEnter: "cellEnter", cellLeave: "cellLeave", focusedCellId: "focusedCellId" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #emptyCell><td class="k-empty k-calendar-td" role="gridcell">&nbsp;</td></ng-template>
     <tr *ngIf="!isHorizontal()" class="k-calendar-tr" role="row" [attr.aria-hidden]="ariaHidden"><th class="k-calendar-caption" scope="col" [colSpan]="colSpan">{{title}}</th></tr>
     <tr *kFor="let row of data; let rowIndex = index" class="k-calendar-tr" role="row">
@@ -282,7 +283,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         </ng-container>
     </tr>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line
@@ -336,7 +337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
     </tr>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.DisabledDatesService }]; }, propDecorators: { showOtherMonthDays: [{
+        }], ctorParameters: function () { return [{ type: i1.BusViewService }, { type: i2.IntlService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i3.DisabledDatesService }]; }, propDecorators: { allowReverse: [{
+                type: Input
+            }], showOtherMonthDays: [{
                 type: Input
             }], direction: [{
                 type: Input

package/esm2020/common/adaptive.module.mjs

@@ -20,19 +20,19 @@ const ADAPTIVE_MODULES = [
  */
 export class AdaptiveModule {
 }
-AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
+AdaptiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AdaptiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, imports: [NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule], exports: [NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule] });
-AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, imports: [ADAPTIVE_MODULES, NavigationModule,
+AdaptiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, imports: [ADAPTIVE_MODULES, NavigationModule,
         ResizeSensorModule,
         ButtonModule,
         TextBoxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AdaptiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AdaptiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...ADAPTIVE_MODULES],

package/esm2020/common/utils.mjs

@@ -19,6 +19,10 @@ export const currentFocusTarget = (blurArgs) => blurArgs.relatedTarget || docume
  * @hidden
  */
 export const isPresent = (value) => value !== undefined && value !== null;
+/**
+ * @hidden
+ */
+export const isNullOrDate = (value) => value === null || value instanceof Date;
 /**
  * @hidden
  */
@@ -57,7 +61,7 @@ export var Keys;
  */
 export const selectors = {
     infiniteCalendarTable: '.k-content .k-calendar-table',
-    multiViewCalendarTable: '.k-content.k-calendar-table'
+    multiViewCalendarTable: '.k-calendar-table'
 };
 /**
  * @hidden

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;
@@ -868,8 +891,8 @@ export class DateInputComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.dateInput.nativeElement);
     }
 }
-DateInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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.0.4", 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.ɵ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", 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
@@ -946,7 +987,7 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
         </button>
     </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: i7.DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -966,6 +1007,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
         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.0.4", ngImpor
         }"
         [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.0.4", ngImpor
                 type: Input
             }], pickerType: [{
                 type: Input
+            }], clearButton: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{

package/esm2020/dateinput/dateinput.module.mjs

@@ -17,14 +17,14 @@ import * as i0 from "@angular/core";
  */
 export class DateInputModule {
 }
-DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
+DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule, IconsModule], exports: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective] });
-DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, imports: [CommonModule, IntlModule, EventsModule, IconsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputModule, decorators: [{
+DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, imports: [CommonModule, IntlModule, EventsModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2020/dateinput/localization/dateinput-custom-messages.component.mjs

@@ -19,14 +19,14 @@ export class DateInputCustomMessagesComponent extends DateInputMessages {
         return true;
     }
 }
-DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages", providers: [
+DateInputCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DateInputCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateInputCustomMessagesComponent, selector: "kendo-dateinput-messages", providers: [
         {
             provide: DateInputMessages,
             useExisting: forwardRef(() => DateInputCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/esm2020/dateinput/localization/dateinput-localized-messages.directive.mjs

@@ -16,14 +16,14 @@ export class DateInputLocalizedMessagesDirective extends DateInputMessages {
         this.service = service;
     }
 }
-DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
+DateInputLocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputLocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+DateInputLocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]", providers: [
         {
             provide: DateInputMessages,
             useExisting: forwardRef(() => DateInputLocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputLocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/esm2020/dateinput/localization/messages.mjs

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

package/esm2020/dateinputs.module.mjs

@@ -51,8 +51,8 @@ const COMPONENT_MODULES = [
  */
 export class DateInputsModule {
 }
-DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
+DateInputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, imports: [CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
@@ -63,13 +63,13 @@ DateInputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versio
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
+DateInputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, imports: [COMPONENT_MODULES, CalendarsModule,
         DateInputModule,
         DatePickerModule,
         TimePickerModule,
         DateRangeModule,
         DateTimePickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateInputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: COMPONENT_MODULES,