为什么 bootstrap-ui 在加载时不显示正确的日期格式?
Why does bootstrap-ui not display correct dateFormat on load?
我已经下载 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 代码
<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">
<span ng-bind="myDate1"></span>
</div>
</div>
</form>
</div>
bootstrap-ui 加载时未显示正确的日期格式
为避免此问题,您必须在 controller 上提供日期格式。
实时代码在这里: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];
根据@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 并尝试使用简单的 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 代码
<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">
<span ng-bind="myDate1"></span>
</div>
</div>
</form>
</div>
bootstrap-ui 加载时未显示正确的日期格式
为避免此问题,您必须在 controller 上提供日期格式。
实时代码在这里: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];
根据@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;
};