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

Question

我有一个材料日期选择器，我只想获取没有时间戳的日期。由于我的时区是GMT+2，API总是接收像03.04.2018 22:00:00 UTC这样的东西，但我想保存本地日期。

我的日期选择器："Wed Apr 11 2018 00:00:00 GMT+0200 (Central Europe Daylight Time)"

<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之前可以对日期选择器的值进行格式化，但我希望有更好的解决方案。

- mklfw

---

请查看以下链接：https://dev59.com/gFYN5IYBdhLWcg3wjIuZ - Suvethan Nantha

谢谢@SuvethanNantha，我使用了答案中的组件，现在它可以正常工作了。 - mklfw

Answer 1

是的，我知道有两种方法可以实现。

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

// 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;
  }

- Srinath Kamath

Answer 2

您可以使用node.js的moment库：

npm i moment --save

之后你可以这样做；

let formatted_date = moment(var_to_format).format("YYYY-MM-DD");

- Kunal Soni