Datepicker vauleChange event - only on user interaction

Datepicker vauleChange event - only on user interaction

Posted by: mary431982 on 13 July 2019, 2:10 am EST

• 

  mary431982

  • Post Options:
  • Link
    Copy

  Posted 13 July 2019, 2:10 am EST

  Hello, I am using , and event valueChanged which fires when the date is changed programmatically or by user interaction. But, I only need the moment when its changed by the user interaction. How can I detect it? Thnx!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 15 July 2019, 5:17 am EST

  Hi,

  You may handle the click event on the dropdown elements of both InputDate and InputTime and set a flag in the event handler that indicates that the value has been changed using the UI. Please refer to the code snippet below:

  In TS:

  isDropSelected: boolean
  
    valChanged(dt: wjcInput.InputDateTime, e: wjcCore.EventArgs) {
      console.dir('value changed');
      if (this.isDropSelected) {
        console.dir('value changed using dropdown');
      }
      this.isDropSelected = false;
    }
  
    initDT(dt: wjcInput.InputDateTime) {
      var self = this;
      dt.calendar.hostElement.addEventListener('click', e => {
        self.isDropSelected = true;
      }, true);
  
      dt.inputTime.dropDown.addEventListener('click', e => {
        self.isDropSelected = true;
      }, true);
    }
  
  

  In HTML:

  <wj-input-date-time (initialized)="initDT(dt)" (valueChanged)="valChanged(dt, $event)" #dt>
  </wj-input-date-time>
  

  You may also refer to the sample below:

  https://stackblitz.com/edit/ckkyne-dr3cjd