UI-Bootstrap datepicker with input mask

Question

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.

See Plunk

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) OR it succeeds in updating the model value but when I open the datepicker it is set to the year 1500 .

The plunk has both a masked and unmasked 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;
  };
});

Answer 1

你不需要掩码，因为 api 会为你做

<input class='form-control' data-provide='datepicker' data-date-format='yyyy-mm-dd'>

Answer 2

datetimepicker master is the solution

jQuery('#datetimepicker_mask').datetimepicker({
 timepicker:false,
 mask:true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
});

http://xdsoft.net/jqplugins/datetimepicker/