UI-Bootstrap datepicker with input mask

You are currently trying to use the standard datepicker, but combine it with an input mask to make it easier to enter the date manually if the user needs it.

See Plunk

At the moment the problem is that when I add the mask, one of two things happen, either the hand typing the date into the field doesn't work (which means that once I'm done, it will remove the value from the field) OR it succeeds in updating the model value, but when I open datepicker

it is set to year 1500

.

The plunger has both a mask and an unscaled version of the input.

Html

<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" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>

      

        
        
        
      

    

Js

.controller('DatepickerDemoCtrl', function ($scope) {
  $scope.dt = new Date();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };
});