Angular Material 当我点击搜索按钮时，日期选择器在 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);

当我在日期选择器中 select 一个日期时，它 select 日期没问题。但是，当我单击搜索按钮（我不包括它）时，select 时间显示晚于日期。我正在研究 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();

Angular Material 当我点击搜索按钮时，日期选择器在 Angular 9 后显示一天

Angular Material Datepicker shows one day behind in Angular 9 when I click search button

datepicker

angular-material

angular