Question

我按照material.angular.io上的示例了解如何使用素材日期选择器，并通过提供MAT_DATE_FORMATS更改默认格式。示例是here。注意：代码在stackblitz中无法正常工作，它似乎忽略了提供的日期格式，但它在我的环境中可以正常工作。

我的问题是当我访问表单控件的值并将其转换为JSON时，它总是输出“2018-01-16T15：44：33.897Z”。我需要它输出日期“2018-01-16”。此外，我希望日期选择器根本不添加时间属性。我怎样才能按照我想要的方式完成这项工作？

我知道您可以调用时刻的format函数并按照您想要的方式格式化日期，但我的表单有很多字段，我更愿意将form.value发送到我的api。如果我想使用moment format函数，我将不得不遍历每个控件，检查其类型，获取值并单独格式化，将所有值收集到一个对象中，然后将其发送到我的api，这是一个很多额外的编码，所以我可以格式化日期控件。

Answer 1

我最终扩展了moment对象并覆盖了toJSON方法。我还复制并编辑了MomementDateAdapter，因此它也使用了编辑后的版本，并以UTC格式创建了所有内容。

这是时刻覆盖：

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
import {default as _rollupMoment} from 'moment';
export class MomentConstructor
{
    static getInstance() {
        const original = _rollupMoment || _moment;
        original.prototype.toJSON = function() {
            return this.format("YYYY-MM-DD");
        }
        return original;
    }
}

//export the typing for Moment so it is easier to import into other classes
export interface Moment extends _moment.Moment {}

对于当前日期适配器，我找到并复制了Material提供的那个，并对其进行了编辑，以便导入的时刻如下所示：

import { MomentConstructor, Moment } from './moment-date-only';
const moment = MomentConstructor.getInstance();

我做了一个替换＆＃34;时刻（＆＃34;并将其替换为＆＃34; moment.utc（＆＃34;。

我在stackblitz上构建了一个示例，但就像我在我的问题中所说的那样，stackblitz没有正确处理适配器，因此为了使其正常工作，您需要在本地实现它。

Answer 2

既然你有一个约会日期，也许你可以使用它？在做什么即将做之前，只需转换它。有些事情（我不是很多，但这给了你一个想法）：

const myStringDate = moment(this.myDatePickerValue; 'YYYY-MM-DD');

Look at the documentation找到适合你的东西！

Answer 3

您可以使用管道更改角度时刻的日期值格式，首先需要安装momentjs，实现变换管道功能。

import {Pipe, ChangeDetectorRef, PipeTransform, OnDestroy, NgZone} from '@angular/core';
import * as moment from 'moment';

// under systemjs, moment is actually exported as the default export, so we account for that
const momentConstructor: (value?: any) => moment.Moment = (<any>moment).default || moment;

@Pipe({name: 'amTimeAgo', pure: false})
export class TimeAgoPipe implements PipeTransform, OnDestroy {
  private currentTimer: number;

  private lastTime: Number;
  private lastValue: Date | moment.Moment;
  private lastOmitSuffix: boolean;
  private lastText: string;

  constructor(private cdRef: ChangeDetectorRef, private ngZone: NgZone) {
  }

  transform(value: Date | moment.Moment, omitSuffix?: boolean): string {
    if (this.hasChanged(value, omitSuffix)) {
      this.lastTime = this.getTime(value);
      this.lastValue = value;
      this.lastOmitSuffix = omitSuffix;
      this.removeTimer();
      this.createTimer();
      this.lastText = momentConstructor(value).from(momentConstructor(), omitSuffix);

    } else {
      this.createTimer();
    }

    return this.lastText;
  }

  ngOnDestroy(): void {
    this.removeTimer();
  }


  private createTimer() {
    if (this.currentTimer) {
      return;
    }
    const momentInstance = momentConstructor(this.lastValue);

    const timeToUpdate = this.getSecondsUntilUpdate(momentInstance) * 1000;
    this.currentTimer = this.ngZone.runOutsideAngular(() => {
      if (typeof window !== 'undefined') {
        return window.setTimeout(() => {
          this.lastText = momentConstructor(this.lastValue).from(momentConstructor(), this.lastOmitSuffix);

          this.currentTimer = null;
          this.ngZone.run(() => this.cdRef.markForCheck());
        }, timeToUpdate);
      }
    });
  }


  private removeTimer() {
    if (this.currentTimer) {
      window.clearTimeout(this.currentTimer);
      this.currentTimer = null;
    }
  }

  private getSecondsUntilUpdate(momentInstance: moment.Moment) {
    const howOld = Math.abs(momentConstructor().diff(momentInstance, 'minute'));
    if (howOld < 1) {
      return 1;
    } else if (howOld < 60) {
      return 30;
    } else if (howOld < 180) {
      return 300;
    } else {
      return 3600;
    }
  }

  private hasChanged(value: Date | moment.Moment, omitSuffix?: boolean) {
    return this.getTime(value) !== this.lastTime || omitSuffix !== this.lastOmitSuffix;
  }

  private getTime(value: Date | moment.Moment) {
    if (moment.isDate(value)) {
      return value.getTime();
    } else if (moment.isMoment(value)) {
      return value.valueOf();
    } else {
      return momentConstructor(value).valueOf();
    }
  }
}

如何在角材料中更改日期选择器formcontrol值格式

3 个答案: