当我单击搜索按钮时，Angular Material Datepicker 在 Angular 9 中显示晚了一天

Question

html:

            <mat-form-field>
                <input matInput [matDatepicker]="picker1" placeholder="From date: mm/dd/yyyy" name="from_date"
                       [(ngModel)]="callListRequestOb.from_date" maxlength="150">
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker>
            </mat-form-field>

方法中：

        this.callListRequestOb.from_date = new Date(this.callListRequestOb.from_date).toISOString().slice(0, 10);

当我在日期选择器中选择日期时，它会选择正确的日期。但是当我单击搜索按钮（我不包括它）时，选择时间显示落后日期。我正在开发 Angular 9。我该如何解决这个问题？

Answer 1

您从日期选择器中选择的日期是当地时间。 从 toISOString() 的文档可以清楚地看出这是 UTC 时间。

“时区始终为零 UTC 偏移，如后缀“Z”所示。” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

如果当地时间最初是当天晚上的 00:00:00，这种差异可能会导致完全不同的一天。 通过减去时区偏移，您可以解决这个问题。

const d = new Date(this.callListRequestOb.from_date)
// This will return an ISO string matching your local time.
new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes() - d.getTimezoneOffset()).toISOString();

Answer 2

我用“字符串连接”轻松解决了这个问题。

在.component.html中

<!-- date of birth -->
    <mat-form-field>
      <input matInput readonly [matDatepicker]="picker" placeholder="Date of birth" formControlName="dob" (dateChange)="formatDate($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="handleError('dob', 'required')">Date of birth is required</mat-error>
    </mat-form-field>

在.component.ts中

/* format date */
formatDate(e: any) {
  var d = new Date(e.target.value)
  var convertDate = d.toISOString().substring(0, 10) + d.toISOString().substring(10,);
  this.actorForm.get('dob')?.setValue(convertDate, { onlyself: true });
}

Answer 3

这可能是时区问题， 在发布数据时，我在 mat-datepicker 和有效负载中选择了日期 14，它显示注册日期：“2023-02-13T16：30：00.000Z”

所以，我刚刚创建了函数

setDate(date:Date){
    let d=date;
    d.setHours(d.getHours() + 5);
    d.setMinutes(d.getMinutes() + 30);
    return new Date(d)
  }

现在，一切正常，因为比下一个日期晚了 5:30。我刚刚添加了 5:30 小时。

Answer 4

这是一个时区问题。如果您控制台并查看日期选择器记录的时间，您将看到对于任何选定的日期，它默认为午夜 (00:00:00)。对于 UTC 以东的时区，此方法效果很好，因为它只需要添加几个小时来解决时差，而无需更改日期。但是，在 UTC 以西的时区中，减去小时数来调整时差会无意中将日期移动一天。看下面的函数，它有一个条件来处理“关闭一天”问题。您可以调用此函数，以便它在日期选择器的值发生变化时运行。

const d = new Date();
const dateFieldSetter = () => {
  const adjustedTime = (d) => {
    if (d) {
      if (d?.getTimezoneOffset() < 0) {
        d?.setMinutes(d?.getMinutes() - d.getTimezoneOffset());
      }
    }
    return d?.toISOString()?.split('T')?.[0];
  };
};