@angular/material/datepicker#MatDatepickerInputEvent TypeScript Examples

export function parseMatDatePicker(event: MatDatepickerInputEvent<unknown, unknown>,
                                   currentDayID: DayID): DayID | undefined {
  let dayID = parseSpecialDate(
    (event.targetElement as any).value || '', currentDayID)
  if (dayID === undefined) {
    const date = event.value
    if (date) {
      dayID = dateToDayID(date as Date)
    }
  }
  return dayID
}

onDeferDateChanged(event: MatDatepickerInputEvent<unknown, unknown>) {
    let dayID = parseMatDatePicker(event, this.dataStore.getCurrentDayID())
    if (dayID === undefined) {
      this.clearDeferDate()
    } else {
      this.draft.deferDate = dayID
      this.deferDate = dayIDToDate(this.draft.deferDate)
    }
  }

onDueDateChanged(event: MatDatepickerInputEvent<unknown, unknown>) {
    let dayID = parseMatDatePicker(event, this.dataStore.getCurrentDayID())
    if (dayID === undefined) {
      this.clearDueDate()
    } else {
      this.draft.dueDate = dayID
      this.dueDate = dayIDToDate(this.draft.dueDate)
    }
  }

onRepeatEndDateChanged(event: MatDatepickerInputEvent<unknown, unknown>) {
    let dayID = parseMatDatePicker(event, this.dataStore.getCurrentDayID())
    if (dayID === undefined) {
      this.clearRepeatEndDate()
    } else {
      this.draft.repeatEndDate = dayID
      this.repeatEndDate = dayIDToDate(this.draft.repeatEndDate)
    }
  }

onSideBarDateChanged(event: MatDatepickerInputEvent<Date, Date | null>) {
    const date = event.value
    if (!date) return
    this.sideBarDayID = dateToDayID(date)
  }

onDateChanged(event: MatDatepickerInputEvent<unknown, unknown>) {
    let dayID = parseMatDatePicker(event, this.dataStore.getCurrentDayID())
    if (dayID === undefined) {
      this.clearDate()
    } else {
      this.date = dayIDToDate(dayID)
    }
  }

onEndDateChanged(event: MatDatepickerInputEvent<unknown, unknown>) {
    let dayID = parseMatDatePicker(event, this.dataStore.getCurrentDayID())
    if (dayID === undefined) {
      this.endDate = null
    } else {
      this.endDate = dayIDToDate(dayID)
    }
  }

/**
   * input element change handler.
   * normalize the different kind of events, handle the datatypes, set the value and emit the change
   */
  change(event: any) {

    let eventTarget: any;

    if (event instanceof MatSelectChange) {
      event = event.value;
    } else if (event instanceof MatDatepickerInputEvent) {
      event = this.serializeDate(event.value, this.schema.dateFormat, this.schema.type);
    } else if (event instanceof MatAutocompleteSelectedEvent) {
      event = event.option.value;
    } else if (event instanceof MatCheckboxChange) {
      event = event.checked;
    } else {
      // save the event target in case the parsing changes the value
      // (e.g. integer input 5.3 becomes 5, this is reflected on the UI via this handle)
      eventTarget = event.target;
      event = event.target.value;
    }

    if (event === '') {
      event = null;
    }

    if (event == null) {
      this.value = null;
    }

    if (this.schema.type === 'number') {
      this.value = parseFloat(event);
    } else if (this.schema.type === 'integer') {
      this.value = parseInt(event, 10);
    } else if (this.schema.type === 'boolean') {
      if (typeof event === 'string') {
        if (event === 'true') {
          this.value = true;
        } else if (event === 'false') {
          this.value = false;
        } else {
          this.value = null;
        }
      } else {
        this.value = event;
      }
    } else if (this.schema.type === 'string') {
      this.value = event;
    } else if (this.schema.type === 'array') {
      this.value = event;
    } else {
      throw new Error('unknown type: ' + this.schema.type);
    }

    this.emit(this.value);
  }

onDateChange(event: MatDatepickerInputEvent<Date>) {
    this.wizardService.onWizardWizardFieldDataChanged(
      this.wizardFieldConfig.id,
      event.value.valueOf()
    )
  }

addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.events.push(`${type}: ${event.value}`);
  }