title: Angular UI date picker validation
body: <p><a href="http://plnkr.co/edit/XQY1TJ7XdqLcx0MxwHAd?p=preview" rel="nofollow noreferrer">In this plunk</a> I have an Angular UI date picker and a message that should be shown only when the date is valid. The problem is that the message is always shown, even when <code>form.$valid</code> is true. Note that if you enter a valid or invalid date and then click on <code>Validate</code>, an alert will display correctly that the date is valid or invalid respectively.</p>
  
  <p>Why is the validation message shown all the time, even when <code>form.$valid</code> is true?</p>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  
  app.controller('ctl', function ($scope) {
  
  
      $scope.dtFrom = new Date ();
  
      $scope.config1 = {};
      $scope.config1.opened = false;
      $scope.open1 = function(event){
           event.preventDefault();
           event.stopPropagation();
           $scope.config1.opened = true;
      };
  
      $scope.validate = function(form){
          if (!form.$valid) {
             alert("Date invalid");
          }
          else {
             alert("Date valid");
          }
      }
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="ctl"&gt;
    &lt;form name="form1" ng-submit="validate(form1)" novalidate&gt;
        &lt;p class="input-group" name="dtFrom" style="width:160px;margin-bottom:0px;"&gt;
            &lt;input type="text" class="form-control" ng-model="dtFrom" 
                 is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
                 close-text="Close" /&gt;
             &lt;span class="input-group-btn"&gt;
                 &lt;button type="button" class="btn btn-default" ng-click="open1($event)"&gt;
                    &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
                 &lt;/button&gt;
             &lt;/span&gt;
        &lt;/p&gt;
        &lt;span ng-show="!form1.dtFrom.$valid"&gt;Invalid Date&lt;/span&gt;
        &lt;br/&gt;
        &lt;button type="submit"&gt;Validate&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>