Prevent date change on mouse wheel

[Richard]

using the Kendo UI for Angular, after the DatePicker control has focus, or a date is entered or selected from pop-up, the mouse wheel move changes the date. The numeric input control has the property, [changeValueOnScroll], that you can set to false, but I do not see one for the kendo-datapicker. 

I also tried creating a directive and added to the datepicker control which tried adding event listener via HostListener and addEventListener to no avail as well as finding the associated input and added the listener to that input, which also did not work.

 

Any thoughts?

[Martin Bechev]

Hi Richard,

Currently, there is no built-in mechanism for disabling the arrow keys and mousewheel/touchpad from changing the DatePicker value. However, the developer can attach custom event listeners for keydown and mouswheel events to the inner <input /> element and stop their propagation.

  ngAfterViewInit() {
        document
          .querySelector('.k-datepicker input')
          .addEventListener('wheel', (e) => {
            e.stopImmediatePropagation();
          });
      }

Please check the following example which demonstrates the suggested approach in action:

https://stackblitz.com/edit/angular-x1hfj9

Regards,
Martin
Progress Telerik