Angular UI datepicker validated as false when empty

Question

I'm using the JqueryUI datepicker(1.0.0) directive with Angular 1.4.9 to display a date of birth. This field is not required and should not be validated unless it's filled.

Once the page loads, the field is validated as true(As expected). And once the user selects a date, it's again valid. But if we were to manually erase the field, the field becomes invalid.

<input ui-date="dateOptions" name="dateOfBirth" ng-model="dob"/>

ng-model can be set to the same value before and after, but the value remains invalid.

I've created a JSFiddle that replicates the problem here. https://jsfiddle.net/nipuna777/ctsmuv80/

Looks to be an bug in the directive, it doesn't check whether the field is required or not and validates the value - return _angular2.default.isDate(uiDateConverter.stringToDate(attrs.uiDateFormat, viewValue)); — Arun P Johny
– Arun P Johny, Commented Mar 15, 2016 at 3:50
@ArunPJohny Is there a way to disable this validation or override it? — nipuna-g
– nipuna-g, Commented Mar 15, 2016 at 4:04

Stepan Kasyanenko · Accepted Answer · 2016-03-15 05:11:01Z

As said @nipuna777, it looks like a bug in the datepicker.

We can fix it with a directive.

Live example on jsfiddle.

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

myApp.directive('uiDateFix', function($timeout) {
  return {
    restrict: "A",
    require: 'ngModel',
    priority: 100,
    scope: {
      ngRequired: "="
    },
    link: function(scope, elem, attr, ngModel) {
      var originalValidate = null;
      $timeout(function() {
        if (!originalValidate)
          originalValidate = ngModel.$validators.uiDateValidator;
        ngModel.$validators.uiDateValidator = function uiDateValidator2(modelValue, viewValue) {
          //Define correct validations
          if (viewValue || scope.ngRequired)
            return originalValidate(modelValue, viewValue);
          else
            return true;
        }
      }, 500);
    }
  }
});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
  $scope.name = 'Superhero';
  $scope.value = 'Superhero';
  $scope.dateOptions = {
    changeYear: true,
    changeMonth: true,
    yearRange: '1900:-0'
  };
  $scope.isReq = true;
  $scope.dob = ""
})

<script src="https://code.jquery.com/jquery-2.2.1.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-date/1.0.0/date.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">


<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h1> Datepicker</h1>
    <form name="person">
      <label for="dateOfBirth">Date of Birth: </label>
      <input ui-date="dateOptions" name="dateOfBirth" ng-model="dob" ui-date-fix ng-required="isReq" />
       <label for="isReq">Required </label>
       <input type="checkbox" name="isReq" ng-model="isReq" />
      <p>
        dob value: {{dob}}
      </p>
      <p>
        dob valid: {{person.dateOfBirth.$valid}}
      </p>
      <p>
        dob errors: {{person.dateOfBirth.$error}}
      </p>

      <hr>

      <h2>Recreating the problem</h2>
      <ol>
        <li>With the field empty dob is valid</li>
        <li>When you select a value from datepicker again the dob field is valid</li>
        <li>When dob is manually removed, the field becomes invalid</li>
      </ol>

    </form>
  </div>
</body>

Why do you need a workaround if it is already fixed in the plugin
I added my answer, after answering a fixed version of the directive ui-date. Of course, it is better to use a fixed version of the directive ui-date.

Arun P Johny · Accepted Answer · 2016-03-15 04:49:13Z

1

It is an issue in the validator of the plugin, it is fixed in the master branch/dist/date.js.

So you can use that file instead of the one in the cdn to fix it

answered Mar 15, 2016 at 4:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Angular UI datepicker validated as false when empty

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related