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?
Forums Home / Wijmo / General Discussion
Posted by: fbernet on 29 November 2018, 9:08 pm EST
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?
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
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
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