datepicker: invalid value on first load from string

[TemitaTom]

Bug Report

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*:

Detailed Reproduction Steps

HTML

<md-content ng-app="MyApp" ng-controller="AppCtrl as ctrl" layout-padding="" layout-margin="" class="datepickerdemoMoment">
  <form name="form1" ng-model="ctrl.form">
  <md-datepicker name="datep" ng-model="ctrl.myDate" ng-change="ctrl.onDateChanged()" md-placeholder="Enter date"></md-datepicker> 
  Date: {{ctrl.myDate | date:shortDate}} {{ form1.datep.$error }}
</md-content>
  </form>
<!--
Copyright 2020 Google LLC. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->

JS

(function () {
  'use strict';

  angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).config(function($mdDateLocaleProvider) {
    /**
     * @param date {Date}
     * @returns {string} string representation of the provided date
     */
    $mdDateLocaleProvider.formatDate = function(date) {
      return date ? moment(date).format('L') : '';
    };

    /**
     * @param dateString {string} string that can be converted to a Date
     * @returns {Date} JavaScript Date object created from the provided dateString
     */
    $mdDateLocaleProvider.parseDate = function(dateString) {
      var m = moment(dateString, 'L', true);
      return m.isValid() ? m.toDate() : new Date(NaN);
    };
  })
  .controller("AppCtrl", function($log) {
    this.myDate = "2021-01-20T07:00:00Z";

    this.onDateChanged = function() {
      $log.log('Updated Date: ', this.myDate);
    };
  });
})();


/**
Copyright 2020 Google LLC. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
**/

With this code, the date IS INVALID. In version AMjs 1.2.1 work great.

Explain the expected behavior

Explain the current behavior

Discuss the use-case or motivation for changing the existing behavior

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.8.2
• AngularJS Material: 1.2.2
• OS: All
• Browsers: All
• Screen Readers:

Add anything else we should know

Stack Trace

Screenshots

[Splaktar]

Since a StackBlitz demo (required) was not provided, I had to do some work to get this sample code to run. Here's the StackBlitz demo.

[Splaktar]

For now, the quick workaround is doing

ctrl.myDate = new Date("2021-01-20T07:00:00Z");

instead of

ctrl.myDate = "2021-01-20T07:00:00Z";

[j-walker23]

FYI, this also fails when the date is type moment.

When DatePickerCtrl.prototype.updateErrorState is called with a moment date
if (this.dateUtil.isValidDate(date)) { is false
So this.ngModelCtrl.$setValidity('valid', date == null); runs and the ngModel ctrl valid key is set to false.

[Splaktar]

It looks like this was caused by b406623.

[Splaktar]

Fixed in #12115

[j-walker23]

Dang, this only fixed it for string. Not moment objects.