title: UI-Bootstrap datepicker with input mask
body: <p>Currently trying to use a standard datepicker but combine it with an input mask to make it easier to enter the date by hand if the user needs to.</p>
  
  <p><a href="http://plnkr.co/edit/6tGAnLDphUgBEQUXdjN4?p=preview" rel="nofollow">See Plunk</a></p>
  
  <p>The problem at the moment is that when I add the mask one of two things happens, either hand typing the date into the field doesn't work (meaning as soon as I finish it deletes the value from the field) <em>OR</em> it succeeds in updating the model value but when I open the <code>datepicker</code> it is set to the year <code>1500</code>.</p>
  
  <p>The plunk has both a masked and unmasked version of the input.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="dt" is-open="opened" min-date="'2010-01-02'" max-date="dt" ng-required="true" close-text="Close" show-weeks="false" show-button-bar="false" ui-mask="99/99/9999" /&gt;
  &lt;button type="button" class="btn btn-default" ng-click="open($event)"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>.controller('DatepickerDemoCtrl', function ($scope) {
    $scope.dt = new Date();
  
    $scope.open = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
  
      $scope.opened = true;
    };
  });
  </code></pre>