angular - 如何使用 Angular Material 中的力矩更改日期选择器表单控件值格式

Question

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

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

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

Answer 1

我最终扩展了 moment 对象并覆盖了 toJSON 方法。我还复制并编辑了 MomementDateAdapter，因此它也使用了 moment 的编辑版本，并以 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();

我在“moment(”上进行了查找替换，并将其替换为“moment.utc(”。

我在 stackblitz 上构建了一个示例但正如我在问题中所说，stackblitz 无法正确处理适配器，因此为了确保它正常工作，您需要在本地实现它。