How to intercept Kendo date-input autoCorrectOn

1 Answer 138 Views

DatePicker

Nate asked on 09 Nov 2021, 12:54 PM | edited on 10 Nov 2021, 01:11 PM

I have a Kendo date range setup as follows:

<kendo-daterange>
    <kendo-dateinput 
       formControlName="trDateTime"
       kendoDateRangeStartInput 
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
    <kendo-dateinput 
       formControlName="trTillDateTime"
       kendoDateRangeEndInput
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
  <kendo-daterange-popup (close)="onDateRangePopUpClosed()" #dateRangeModal></kendo-daterange-popup>
</kendo-daterange>

And we're trying to handle the date input using the following function

export function updateFormTime(formGroup: FormGroup) {
  const formControls = formGroup.controls;

  const trDate = new Date(formControls['trDateTime'].value);
  const trTillDate = new Date(formControls['trTillDateTime'].value);
  
  let startTime: Date;
  let endTime: Date;

  startTime = DateHelper.timeToDate(formControls['fcfsFrom'].value, trDate);
  endTime = DateHelper.timeToDate(formControls['fcfsTo'].value, trDate);

  if (startTime == null) {
    startTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  if (endTime == null) {
    endTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  const trDateTime = new Date(trDate.getFullYear(), trDate.getMonth(), trDate.getDate(), startTime.getHours(), startTime.getMinutes(), startTime.getSeconds());
  const trTillDateTime = new Date(trTillDate.getFullYear(), trTillDate.getMonth(), trTillDate.getDate(), endTime.getHours(), endTime.getMinutes(), endTime.getSeconds());

  formGroup.patchValue({
    trDateTime: trDateTime,
    trTillDateTime: trTillDateTime,
  });
}

The problem is that when the user goes to select a start date that's later than the end date, it only updates the end date when it should update the start date. The autoCorrectOn directive handles that, and it does if I disable the updateFormTime function but we need that function and it doesn't work if I leave it in there. Not having much luck finding the precedence between the blur that the autoCorrectOn directive follows and valueChange.

The problem is that we need to modify the date values to include times from other controls. It appears that the patchValue call is firing the valueChange on the date inputs when I do this and it messes up the autoCorrecOn function.

Thanks in advance.

1 Answer, 1 is accepted

Accepted