带输入掩码的 UI-Bootstrap 日期选择器

Question

目前正在尝试使用标准日期选择器，但将其与输入掩码结合起来，以便在用户需要时更容易手动输入日期。

参见普朗克

目前的问题是，当我添加掩码时，会发生以下两种情况之一，要么手动在字段中输入日期不起作用（意味着一旦我完成它就会从字段中删除该值），要么它成功更新模型值，但当我打开它时，它datepicker被设置为年份1500。

该 plunk 具有输入的屏蔽版本和未屏蔽版本。

超文本标记语言

<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

你不需要 mask，因为 api 会为你做这件事

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