Angular Material 日期选择器 - 仅选择日期

Question

我有一个 Material Datepicker，我只想从中获取没有时间戳的日期。由于我的时区是 GMT+2，API 总是收到类似 03.04.2018 22:00:00 UTC 的信息，但我想将日期保存在本地。

我的日期选择器:“2018 年 4 月 11 日星期三 00:00:00 GMT+0200(中欧夏令时)”

<div class="input-group">
    <input matInput [matDatepicker]="start" readonly="readonly" class="form-control" formControlName="start" name="start" >
    <div class="date__picker__button">
        <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
        <mat-datepicker #start [disabled]="!formulationForm.enabled"></mat-datepicker>
    </div>
</div>

可以在调用 API 之前格式化 datepicker 值，但我希望有更好的解决方案。

Answer 1

是的，我知道有 2 种有效的方法。

使用日期适配器。您可以将其用作服务或全局函数。

// date.helpers.ts

import { formatDate } from '@angular/common';
import { Injectable } from '@angular/core';
import { NativeDateAdapter } from '@angular/material/core';

export const PICK_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' }
    }
};

@Injectable({
    providedIn: 'root'
})
export class PickDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === 'input') {
            return formatDate(date, 'dd/MM/yyyy', this.locale);;
        } else {
            return date.toDateString();
        }
    }
}

// add this to your.module.ts

providers: [
    NomineeService,
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'legacy' } },
    { provide: DateAdapter, useClass: PickDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS },
  ]

使用用户定义的函数将 ISODate 转换为可读日期。

// shared.service.ts

formatDate(date): string {
    const _date = new Date(date);
    const day = _date.getDate();
    const month = _date.getMonth() + 1;
    const year = _date.getFullYear();
    return `${year}-${month}-${day}`;
  }

  formatTime(date: Date): string {
    const _date = new Date(date);
    const hours = _date.getHours()
    const minutes = _date.getMinutes();
    const seconds = _date.getSeconds();
    return `${hours}:${minutes}:${seconds}`;
  }

  toDateTimestamp(date: Date): string {
    const dateStamp = this.formatDate(date);
    const timeStamp = this.formatTime(date);
    return `${dateStamp} ${timeStamp}`
  }
  calculateDays(fromDate, toDate): number {
    const FromDate = new Date(fromDate);
    const ToDate = new Date(toDate);
    const difference = ToDate.getTime() - FromDate.getTime();
    const days = Math.round((difference / (1000 * 60 * 60 * 24)));
    return days;
  }