Strange error with date input in angular

Question

I'm trying to set today as the max date in date input. But every time i choose today in the date picker, the model value was always undefined. Has someone met the same problem like this?

html code:

<form name="myForm" class="item"> 
    <input type="date" ng-model="date" max="{{maxDateStr}}" name="dateInput">

    <p> date： {{date | date:'yyyy-MM-dd'}}</p>
    <p>myForm.$valid :  {{myForm.$valid}}</p>
    <p>myForm.dateInput.$error.max :  {{myForm.dateInput.$error.max}}</p>
 </form>

js code:

angular.module('angularApp',[])

.controller('MyCtrl', function($scope, $filter) {
    $scope.maxDateStr = $filter('date')(new Date(), 'yyyy-MM-dd');
    $scope.date = new Date();

});

my code on codepen

after debug in chrome, i found that when choose the max date, the value pass to NgModelController.$parsers had time e.g. Thu Jul 02 2015 16:54:00 GMT+0800 (CST). When run the max validator it returns false,

angular max validator code:

  var maxVal;
  ctrl.$validators.max = function(value) {
    return !isValidDate(value) || isUndefined(maxVal) || parseDate(value) <= maxVal;
  };

because the maxVal value was Thu Jul 02 2015 00:00:00, it returns false.

your codepen doesn't open. and also, try to put the code in question itself in brief. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 2, 2015 at 8:14
edit your link -> remove space in starting and add : after http — binariedMe
– binariedMe, Commented Jul 2, 2015 at 8:15
Saw your code... it is working fine for me... what is the exact problem? — binariedMe
– binariedMe, Commented Jul 2, 2015 at 8:21
I'm so sorry for that. The link has changed and can open now — Feng Lu
– Feng Lu, Commented Jul 2, 2015 at 8:24
@RohitKumar But when i choose the max date, the model value was undefined — Feng Lu
– Feng Lu, Commented Jul 2, 2015 at 8:26

Hitesh Siddhapura · Accepted Answer · 2015-07-03 06:17:17Z

3

Replace your code with following

angular.module('angularApp',[])

.controller('MyCtrl', function($scope, $filter) {
    $scope.maxDateStr = $filter('date')(new Date(), 'yyyy-MM-dd');
    $scope.date = new Date();
});

with

angular.module('angularApp',[])

.controller('MyCtrl', function($scope, $filter) {
    $scope.maxDateStr = $filter('date')(new Date(), 'yyyy-MM-dd');
    $scope.date = new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate());
});

Note: It will create date with 00:00:00 time, so it should perfect working with max validation.

answered Jul 3, 2015 at 6:17

Hitesh Siddhapura

1,40215 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Strange error with date input in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related