1. Home
  2. Forum
  3. Angular
  4. update input value not only on blur, but after every key press

update input value not only on blur, but after every key press

Hello,

I'm using your dateTimePicker and datePicker components in my project. I would like to ask you if there is some way to update the input value of these components right after every keypress (when the user enters the date manually), or at least once after the input is provided without the need to focus out of the input. 

Now it seems to me that it is updated only once the user finishes his keyboard input and focuses out of input, the "change" emitter function is fired only once.

Selecting values from dropdown works fine, but I need to trigger change detection after every manual change in input. Is there some way to this? 

Thanks for your reply in advance. :)

1 Reply
MK Muthukrishnan Kandasamy Syncfusion Team December 10, 2020 01:29 PM UTC

 
Hi Diana, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in EJ1 Angular DatePicker and DateTimePicker components. Since, input element of DatePicker will validate the value it when updating its value in component model.  
 
If we update its value on every key press, then value will be validated by our components and if the validation fail, then DatePicker will its value to its previous value. 
 
Due to the reason only we are updating the component value on focusing out the input element. This is the default behavior of the component. So, It is not generic and feasible requirement to update the DatePicker components value for each key press event. 
 
We can get value by using ejchange event after the focus outing the DatePicker component. Please refer to the below code block. 
 
[app.component.html] 
 
<label>DatePicker</label> 
<input type="text" ej-datepicker id="datepick" (ejchange)="onChange($event)" /> 
 
<label>DateTimePicker</label> 
<input type="text" ej-datetimepicker id="datetimepick" (ejchange)="onDTChange($event)" width="200px" /> 
 
 
 
[app.component.ts] 
 
export class AppComponent { 
    constructor() { 
    } 
    onChange(e:any){ 
      console.log(e); 
    } 
    onDTChange(e:any){ 
      console.log(e); 
    } 
} 
 
 
We have attached sample application for your convenience, which can be downloaded from the below link. 
 
 
DatePicker 
 
 
 
 
DateTimePicker 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 
 


Loader.
Up arrow icon