This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
datepicker: invalid value on first load from string #12075
Description
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
Activity
Splaktar commentedon Feb 1, 2021
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 commentedon Feb 1, 2021
For now, the quick workaround is doing
instead of
j-walker23 commentedon Jun 8, 2021
FYI, this also fails when the date is type moment.
When
DatePickerCtrl.prototype.updateErrorStateis called with a moment dateif (this.dateUtil.isValidDate(date)) {is falseSo
this.ngModelCtrl.$setValidity('valid', date == null);runs and the ngModel ctrl valid key is set to false.Splaktar commentedon Jul 5, 2021
It looks like this was caused by b406623.
fix(datepicker): ISO 8601 dates decorated as invalid in forms
Splaktar commentedon Jul 5, 2021
Fixed in #12115
fix(datepicker): ISO 8601 dates decorated as invalid in forms
j-walker23 commentedon Aug 6, 2021
Dang, this only fixed it for string. Not moment objects.
fix(datepicker): ISO 8601 dates decorated as invalid in forms