当我单击搜索按钮时，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();