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

当我在 datepicker 中选择一个日期时，它会很好地选择日期。但是当我点击搜索按钮（我不包括它）时，选择时间显示一个落后的日期。我正在使用 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();