Prevent text input on InputDateRange

Prevent text input on InputDateRange

Posted by: matt_baker on 19 April 2021, 11:16 pm EST

• 

  matt_baker

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 April 2021, 11:16 pm EST

  Is there a simple way to prevent a user from editing the dates in the Input field, only allowing them to change the range by using the dropdown calendars?

  I’ve tried using a preventDefault on the inputElement property with no luck Setting to readonly seems to also prevent editing via the menu

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 20 April 2021, 6:45 am EST

  Hi,

  You need to add keydown event listener on the input hostElement and call preventDefault() to suppress key events. Please refer to the code snippet and the sample link demonstrating the same:

  inputDateRange.hostElement.addEventListener(
    "keydown",
    (e) => {
      switch (e.keyCode) {
        case Key.F4: //allow dropdown open using f4
        case Key.Left: // allow selection using shift + left/right
        case Key.Right:
          return;
      }
      // for other cases it will be disabled
      e.preventDefault();
    },
    true
  );
  

  https://codesandbox.io/s/loving-engelbart-u3sgr?file=/src/index.js

  Thank you.