为什么 datepicker 角度中的日期显示最后一天？答案

【问题标题】：Why is the date in datepicker angular showing the last day?为什么 datepicker 角度中的日期显示最后一天？
【发布时间】：2018-01-12 10:55:01
【问题描述】：

我使用 datepicker c 角度材料。代码如下：

<td [formGroup]="item">
 <div class="input-group">
  <div class="input-group-addon">
   <mat-datepicker-toggle mdSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
  </div>
  <input class="form-control" [matDatepicker]="picker" placeholder="Date" formControlName="date">
 </div>
</td>

Datapicker 是发送时发送给服务器的形式。

但问题是这些值是在最后一天传输的。

比如我选择了1/18/2018，但是发送到服务器2018-01-17T22: 00: 00.000Z。

奇怪的是，日期的角管正确地转换了日期，但在显示它之前，我在服务器上有一个按月分组的请求，新月的第一天落在前一天的最后一天.

我以日期类型存储在猫鼬模式中的日期。

也许有人对此有疑问。

谢谢。

【问题讨论】：

总是这个时间：前一天的22:00:00？
是的，一直都是
查看服务器和客户端之间的时区。它们可能不同。您可能需要以始终标准的 UTC unix 时间戳之类的方式处理您的时间戳，然后在适当的时区显示它
也许，但如果我在浏览器中读取日期值，我会在一天之前得到
三个问题：（a）您的服务器是否可能与客户端（全球应用程序）处于不同的时区（b）服务器是否需要知道时间客户端（我的意思是，服务器是否告诉不同时区的其他客户端原始客户端的当前时间）（c）您能否提供更多详细信息（具体用例）？也许您根本不需要弄乱日期选择器...

标签： javascript angular datepicker

【解决方案1】：

我通过将 datepicker 日期值转换为 UTC 来解决这个问题。这是一个例子：

const d = new Date(<DATE FROM FORM FIELD>);
const date = Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());

也许修复它不是优雅的方法，但请帮助我

【讨论】：

【解决方案2】：

我遇到了类似的问题。我通过将 Datepicker 配置为使用 UTC 日期来解决它。（默认使用当地时间）只需在您的组件声明中添加一些提供程序：

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';

@Component({
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}
  ]
})

【讨论】：

【解决方案3】：

与接受的答案类似，但不那么冗长，并且会保留小时/分钟/秒。

const dt = new Date(event.value);
const tz = dt.getTimezoneOffset();
const seconds = (dt.getTime() / 1000) - (tz * 60);

【讨论】：

【解决方案4】：

你可以这样解决它：例如，如果您正在获取日期 -> one_day_back_date_value

var one_day_back_date_value = moment.tz(moment(date_value_from_backend), 0).format("YYYY-MM-DD");
date_value_from_backend = moment(one_day_back_date_value).toDate();

请注意： moment 和 moment-timezone 库 是必须的。在 moment-timezone 库上方包含 moment 库。

【讨论】：

【解决方案5】：

如果您不使用 moment 或不想覆盖完整的 date-datapter，那么您可以覆盖 native-date-adapter

@Injectable({        providedIn: 'root' }) 
export class CustomDateAdapterService extends NativeDateAdapter {    
    public createDate(year: number, month: number, date: number): Date {
        const localDate = super.createDate(year, month, date);
        const offset = localDate.getTimezoneOffset() * 60000;
        return new Date(localDate.getTime() - offset); // utcDate
    } 
}

gist here

【讨论】：

【解决方案6】：

试试这个，它解决了问题，与日期选择器无关

const d = new Date(fieldDate);
d.setMinutes(d.getMinutes() + d.getTimezoneOffset());
console.log(d);

【讨论】：