如何使用角度材料中的力矩更改日期选择器表单控件值格式

Question

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

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

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

Answer 1

我最终扩展了 moment 对象并覆盖了 toJSON 方法。我还复制并编辑了 MomentDateAdapter，因此它也使用了 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 不能正确处理适配器，因此为了看到它正常工作，您需要在本地实现它。