Set the inputElement of an InputDate to readonly

Set the inputElement of an InputDate to readonly

Posted by: fbernet on 29 November 2018, 9:08 pm EST

• 

  fbernet

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 November 2018, 9:08 pm EST

  Hello,
  
  in angular 2, is there a way to set the inputElement of the inputDate component to readonly and therefore force the user to touch/click the calendar button to choose the date?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 December 2018, 5:01 pm EST

  Hi,

  You may handle the keydown event and call preventDefault() to disable input using input box.
  
  Please refer to the following code snippet and sample:

  let inp = inputDateInstance;
  inp.hostElement.addEventListener('keydown',(e)=>{
        switch(e.keyCode){
          case wjcCore.Key.F4: //allow open dropdown using f4
          case wjcCore.Key.Left: // allow selection using shift + left/right
          case wjcCore.Key.Right: return;
        }
        // disable otherwise
        e.preventDefault();
      }, true);
  

  https://stackblitz.com/edit/angular-rp7pqb?file=app%2Fapp.component.ts

  ~Sharad

• 

  fbernet

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 3:19 am EST

  Hi,
  
  in the end, we used the following solution:

  
  const inputDate: WjInputDate = this.elementRef.nativeElement['$WJ-CTRL'] as WjInputDate;
  inputDate.inputElement.disabled = true;
  
  

  I hope that can help other people

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 December 2018, 3:42 pm EST

  Hi,

  Thanks for sharing your implementation. It would be really helpful for other people facing the same issue.

  Thanks
  
  Sharad