Question

我已经下载了bootstrap-ui并尝试使用简单的datePickerPopup。但是当输入首次加载输入时，不会以正确的格式显示日期吗？

这是plunkr

http://plnkr.co/edit/Uhi7tcHONyKkKrJdBPZe

这是代码

var app = angular.module('app', ['ui.bootstrap']);

app.controller('MyController', ['$scope', function($scope) {

  // this value is default and should display in input box, formatted!
  $scope.myDate1 = new Date();

  $scope.openDatePicker = function(e) {
      e.preventDefault();
      e.stopPropagation();

      $scope.pickerOpen = true;
  };

}]);

HTML CODE

<div ng-controller="MyController" class="container-fluid">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">Date</label>
      <div class="col-sm-10">
        <p class="input-group">
            <input type="text" class="form-control" datepicker-popup="dd MMM yyyy" ng-model="myDate1" is-open="pickerOpen" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="openDatePicker($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-push-2 col-sm-10">
          &nbsp;<span ng-bind="myDate1"></span>
      </div>
    </div>
  </form>
</div>

Answer 1

bootstrap-ui无法在加载时显示正确的dateFormat
要避免此问题，您必须在控制器上给出日期格式。实时代码在这里：http://jsfiddle.net/RLQhh/983/

<br>
 <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>

控制器是：

 $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

Answer 2

根据@Nicholas的建议，此修复工作正常，可在https://github.com/angular-ui/bootstrap/pull/2943/files

找到

ngModel.$render = function() {
    var date = ngModel.$viewValue ? parseDate(ngModel.$viewValue) : null;
    var display = date ? dateFilter(date, dateFormat) : '';
    element.val(display);
    scope.date = date;
};

为什么bootstrap-ui在加载时没有显示正确的dateFormat？

2 个答案: