带有 moment.js 的 AngularJS 表单上的默认日期问题答案

【问题标题】：Issue with default dates on AngularJS form with moment.js带有 moment.js 的 AngularJS 表单上的默认日期问题
【发布时间】：2017-07-26 09:11:53
【问题描述】：

我将 AngularJS 与 moment.js 一起使用。当我加载以下代码时，它总是将今天设置为网页上日期选择器控件中的默认日期。我希望它默认为NULL，这可能吗？似乎加载 moment.js 导致这种情况发生。

.config(function ($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function (date) {
        return moment(date).format('DD-MM-YYYY');
    };
})

<label>Date of Birth</label>
<md-datepicker ng-model="user.Date_Of_Birth"></md-datepicker>

【问题讨论】：

彼得有什么反馈或建议吗？

标签： javascript html angularjs momentjs

【解决方案1】：

根据md-datepicker documentation ng-model 是date 类型的必需属性。所以不，你不能有一个默认值null，它必须是date的类型：

<md-datepicker ng-model="birthday"></md-datepicker>

这是您尝试处理的working fiddle（带有默认日期）。 This invalide fiddle 使用 null 作为默认日期 -> 所以这次日期选择器显示 invalide date。

var myApp = angular.module('myApp',['ngMaterial']);

myApp.controller('MyCtrl', function ($scope) {
    $scope.myDate = new moment()._d
}).config(function ($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function (date) {
        return moment(date).format('DD-MM-YYYY');
    };
})

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <md-datepicker ng-model="myDate"></md-datepicker>
</div>

【讨论】：

如果你不加载 moment.js 则默认为空白，但我需要 moment.js 将日期格式更改为 UK。
@PeterMoss 它按预期工作。我添加了一个工作小提琴 -> jsfiddle.net/fdz2841u 和一个以 null 作为默认日期值的小提琴 -> jsfiddle.net/4n8vpqoz/1 请提供有关您的问题的更多信息。
嗨，这就是我想要发生的事情 - codepen.io/petemossuk/pen/peEPmP 但是当我添加取消注释代码以使用 moment.js 时，它会将默认日期设置为今天，每次页面加载时我需要它默认为空/空白，因此用户必须自己输入/选择日期。
@PeterMoss 对我来说看起来像是一个错误行为。由于文档的原因，不是date 的ng-model 值无效。这是一个错误，而不是一个功能。请创建一个错误报告@github github.com/angular/material 并使用date 类型的对象初始化您的日期选择器。 md-datepicker 不支持 null 作为默认日期的行为 -> 你无法做到这一点。您可能会为您的处理创建一个自定义指令。
@PeterMoss 为什么你需要一个非预选的日期选择器？这在 Web 应用程序中是不寻常的。

【解决方案2】：

对于发现上述解决方案有点不足的其他人，请考虑替代方案：

HTML

    <div>
        <input matInput [matDatepicker]="dp" [formControl]="date" placeholder="...">
        <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
             <mat-datepicker #dp 
                                  startView="year"
                                  (yearSelected)="chosenYearHandler($event)"
                                  (monthSelected)="chosenMonthHandler($event, dp)"
                                  panelClass="example-month-picker">
             </mat-datepicker>
    </div>

角度

    date = new FormControl(); //Initialize the date without moment

    chosenYearHandler(normalizedYear: Moment) {
        const ctrlValue = new FormControl(moment()).value; //Initialize moment when clicked
        ctrlValue.year(normalizedYear.year());
        this.date.setValue(ctrlValue);
    }

    chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
        const ctrlValue = new FormControl(moment()).value; //Initialize moment when clicked
        ctrlValue.month(normlizedMonth.month());
        this.date.setValue(ctrlValue);
        datepicker.close();
    }

文档中的唯一修改是从初始化中删除 moment()。参考：https://material.angular.io/components/datepicker/overview

【讨论】：