Angular Material 2 (MatDatepickerModule) - 在日期选择器中选择的日期关闭了 1 天

Question

我正在使用 Angular Material Beta 11 版本开发 Angular 应用程序 (v4.4.3)。在 beta 11 中，日期选择器接受 ISOformat 字符串中的日期。但是，在我的应用中，日期选择器模块中的日期相差 1 天，如下图所示：

我的应用程序中的日期流程如下，应用程序从 Mysql 数据库接收 Unix 纪元时间的日期，我将该纪元时间日期转换为 ISOString 字符串格式并将该 ISO 日期返回给 matDatePicker。

/**
 * This method takes the key, which is a epoch time in string format and convert into JS Date object.
 * @param key {string} - the epoch time
 * @return {string} - Date Object.
 */
private static dateHelper(key: string): any {
    const dateObj = new Date(+key * 1000);
    // Need to return ISOString format date as accepted by Material DatePicker component
    return dateObj.toISOString().substring(0, 10);

}

我还有日期选择器模块，以自定义格式显示日期：

import {NgModule} from '@angular/core';
import {MdDatepickerModule, MdNativeDateModule, NativeDateAdapter, DateAdapter, MD_DATE_FORMATS} from '@angular/material';

// extend NativeDateAdapter's format method to specify the date format.
export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            const day = date.getUTCDate();
            const month = date.getUTCMonth() + 1;
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        } else {
            return date.toDateString();
        }
    }
}

const MY_DATE_FORMATS = {
    parse: {
        dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
    },
    display: {
        dateInput: 'input',
        monthYearLabel: {year: 'numeric', month: 'short'},
        dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
        monthYearA11yLabel: {year: 'numeric', month: 'long'},
    }
};

@NgModule({
    declarations: [],
    imports: [],
    exports: [MdDatepickerModule, MdNativeDateModule],
    providers: [
        {
            provide: DateAdapter, useClass: CustomDateAdapter
        },
        {
            provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS
        }
    ]
})

export class DatePickerModule {

}

日期选择器：

    <mat-form-field>
            <input matInput
                   [matDatepicker]="myDate"
                   placeholder="Start Date"                       
                   [(ngModel)]="date"
                   name="start_date" required>
            <mat-datepicker-toggle matSuffix [for]="myDate"></mat-datepicker-toggle>
            <mat-datepicker #myDate></mat-datepicker>
            <mat-error>This field is required!</mat-error>
        </mat-form-field>

我对此进行了谷歌搜索，并且有一些与此问题相关的帖子，但我无法完全关注它们。对此的任何输入将不胜感激。谢谢！

Answer 1

如果您在自定义日期适配器的 format 方法中使用 date.getDate() 和 date.getMonth()，not date.getUTCDate() 和 date.getUTCMonth()，它应该可以工作。

尝试告诉我们：

export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
           if (displayFormat == "input") {
               let day = date.getDate();
               let month = date.getMonth() + 1;
               let year = date.getFullYear();
               return `${year}-${month}-${day}`
           } else {
               return date.toDateString();
           }
       }
}

Answer 2

解决了。感谢大家的投入。

因此，在这里进行了一些讨论并浏览了 Angular Material 2 Github 问题和帖子之后，我得到了一些将 Date 分配给 DatePicker 组件的想法和方法。在 Material beta 11 中，DatePicker 组件可以采用Date 或ISOString 格式的日期。我在使用 ISOString 格式时遇到了问题。我刚刚将其更新为正常的Date 格式，如下所示。

我的问题中更新的代码 sn-ps：

 /**
 * This method takes the key, which is a epoch time in string format and 
 * convert into JS Date object.
 * @param key {string} - the epoch time
 * @return {string} - Date Object.
 */
private static dateHelper(key: string): any {
    const dateObj = new Date(+key * 1000);
    // Need to return Date object/ISOString format date as accepted by Material DatePicker component
    return new Date(dateObj.getFullYear(), dateObj.getUTCMonth(), dateObj.getUTCDate());;

}

这是我为匹配 mdInput 中的日期和日历所做的唯一更改。当我使用ISOString 格式时，我仍然不确定问题的原因。另外，我意识到我不需要使用任何CustomDateAdapter，因为它主要用于外观目的。

Answer 3

如果不在控制台中进行调试，某处的日期很可能会用时区表示。并且表示的时区与 UTC 相差 1 天。

可能是 date.toDataString()。

见this。

Answer 4

我不太确定这一点，但我怀疑Date 转换的纪元时间和时区对它的影响。尝试this的方式转换DB时间。

最有可能在这一行，

const dateObj = new Date(+key * 1000);

Date 构造函数可能会根据您的本地（系统）TZ 初始化日期，这可能会抵消 UTC 时间。

编辑

好的，深入一点。我想我已经找到了这个问题的原因。您可能还必须在您的CustomDateAdapter 中自定义parse() 方法，因为它实际上将给定的date (UTC) 转换为本地时间（区域）日期，根据this 内置parse() 方法。

尝试在您的 CustomDateAdapter 中添加一些效果，

parse(value: any): Date | null {
 if (typeof value == 'number') {
  return new Date(value); // not likely to enter here as your date is in 'string' format
 }
 return value ? new Date(Date.parse(value + ' GMT')) : null; //forces Time Zone to GMT/UTC and converts it
}

看看它是否能解决你的问题。