在 Angular 中动态更新 jQuery datepicker 属性

Question

我的项目中有 datetimepicker 组件。那就是component.html：

<div
 class="custom-input-group with-icon"
 [class.inputbox-error]="!valid">
  <input
   #dateInput
   autocomplete="nope"
   [title]="placeholder"
   [(ngModel)]="value"
   [disabled]="disabled"
   [mask]="mask"
   [dropSpecialCharacters]="false"
   [attr.placeholder]="!disabled && placeholder ? placeholder : ''"
   [attr.data-min-view]="viewMode"
   [class]="innerClass"
   [attr.data-view]="viewMode"
   [attr.data-date-format]="dateFormat"/>
     <label *ngIf="!disabled" class="input-icon">
       <svg class="icon-calm" (click)="clickIcon()">
        <use xlink:href="#cal-gray"></use>
       </svg>
       <svg class="icon-active">
        <use xlink:href="#cal-brown"></use>
       </svg>
     </label>
</div>

那是我的component.ts：

import { AfterViewInit, Component, ElementRef, forwardRef, ViewChild, Input, OnChanges, SimpleChanges 
 } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { InputComponent } from '../input/input.component';
import * as moment from 'moment';

declare let $;

export declare type DateValidateFn = ((term: moment.Moment) => boolean);

@Component({
  selector: 'app-form-datetime-input',
  templateUrl: './datetime-input.component.html',
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatetimeInputComponent), multi: true 
    },
  ]
})
export class DatetimeInputComponent extends InputComponent
implements ControlValueAccessor, AfterViewInit, OnChanges {
@Input()
public viewMode;

@Input()
public dateFormat = "dd.mm.yyyy";

@Input()
public minDate: any;

@Input()
public maxDate: any;

@Input()
public startDate: any;

@Input()
public mask;

@Input()
public validateFn:  DateValidateFn;

public valid = true;

@ViewChild('dateInput') dateInput: ElementRef;

ngAfterViewInit() {
$(this.dateInput.nativeElement).datepicker({
  startDate: this.startDate ?
    moment(this.startDate, 'DD.MM.YYYY').toDate() : null,
  minDate: this.minDate ?
    (this.minDate instanceof Date ? this.minDate :
      moment(this.minDate, 'DD.MM.YYYY').toDate()) : null,
  maxDate: this.maxDate ?
    (this.maxDate instanceof Date ? this.maxDate :
      moment(this.maxDate, 'DD.MM.YYYY').toDate()): null,
  onSelect: (date) => {
    this.value = $(this.dateInput.nativeElement).val().toString();
   }
 });
}

ngOnChanges(changes: any) {
 if (this.dateInput) {
  let date = $(this.dateInput.nativeElement).val().toString();
  if (changes.maxDate && this.maxDate) {        
    $(this.dateInput.nativeElement).datepicker({ 
      maxDate: this.maxDate ?
      (this.maxDate instanceof Date ? this.maxDate :
        moment(this.maxDate, 'DD.MM.YYYY').toDate()): null});
  }
  if (changes.minDate && this.minDate) {
    $(this.dateInput.nativeElement).datepicker({ 
      minDate: this.minDate ?
      (this.minDate instanceof Date ? this.minDate :
        moment(this.minDate, 'DD.MM.YYYY').toDate()) : null});
  }
  this.value = date;
 }
}

set value(val: string) {
 if (val) {
  const m = moment(val, this.dateFormat.toUpperCase(), true);

  if (!m.isValid()) {
    this.valid = false;
    return;
  }

  if (this.maxDate) 
  {
    if (m.isAfter(moment(this.maxDate, 'DD.MM.YYYY', true)))
    {
      this.valid = false;
      return;
    }
  }
  else 
  {
    if (m.year() > (new Date()).getFullYear()) {
      this.valid = false;
      return;
    }
  }
  
  if (this.minDate &&
    m.isBefore(moment(this.minDate, 'DD.MM.YYYY', true))) {
    this.valid = false;
    return;
  }

  if (this.validateFn && !this.validateFn(m)) {
    this.valid = false;
    return;
  }

  val = m.format(this.dateFormat.toUpperCase());
}

 this.valid = true;

 super.value = val;
}

get value() {
 return this._value;
}

clickIcon() {
 $(this.dateInput.nativeElement)
  .trigger("focus");
 }
}

在我的 ngOnChanges 中，我需要更新现有日期选择器的 maxDate 和 minDate 属性。它会更新它们。但是选定的值从我的日期选择器中消失了。我也得到这样的错误： ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked。以前的值：'09.07.2021'。当前值：''。

我也尝试使用此命令更新属性：

$(this.dateInput.nativeElement).datepicker('options', 'maxDate', 
       this.maxDate ?
      (this.maxDate instanceof Date ? this.maxDate :
        moment(this.maxDate, 'DD.MM.YYYY').toDate()): null});

这也从 datepicker 中删除了我选择的值，但没有产生任何错误。

我做错了什么？该组件在其他一些页面中使用，maxDate\minDate 值通过模型更改来自它们。我看到他们正在更新我的元素：

但他们没有在弹出选择器上更新。

UPD1我也试过这个变体：

ngOnChanges(changes: any) {
if (this.dateInput) {
  let date = $(this.dateInput.nativeElement).val();
  if (changes.maxDate && this.maxDate) {        
    $(this.dateInput.nativeElement).datepicker({ 
      maxDate: this.maxDate ?
      (this.maxDate instanceof Date ? this.maxDate :
        moment(this.maxDate, 'DD.MM.YYYY').toDate()): null});
  }
  if (changes.minDate && this.minDate) {
    $(this.dateInput.nativeElement).datepicker({ 
      minDate: this.minDate ?
      (this.minDate instanceof Date ? this.minDate :
        moment(this.minDate, 'DD.MM.YYYY').toDate()) : null});
  }
  $(this.dateInput.nativeElement).datepicker('setDate', date);
 }
}

它会在选择器弹出窗口中更改我的 maxDate\minDate，但也会删除我的日期选择器中的选定值。在我的情况下如何设置它的值？

Answer 1

我解决了我的问题。我将 datepicker 值设置命令更改为：

let date = $(this.dateInput.nativeElement).val().toString();
......
$(this.dateInput.nativeElement).datepicker().val(date).trigger('change')

现在我的日期选择器的属性正在改变，我没有丢失我选择的值。