Angular JS bootstrap ui日历问题
Posted
技术标签:
【中文标题】Angular JS bootstrap ui日历问题【英文标题】:Angular JS bootstrap ui calendar issue 【发布时间】:2015-06-07 17:21:01 【问题描述】:我在使用 angular-ui 引导日历时遇到了非常奇怪的问题。
这是我创建的示例
http://plnkr.co/edit/V5UgCbfilCXX8nsube12?p=preview
场景是,当页面登陆时,它在 ng-model 变量中显示正确的日期,但是当我从日历中选择日期时,ng-model 显示 UST 中的日期。
例如当我从日历中选择日期为“01/05/2012”时,ng-model 绑定属性显示为“2012-01-04T18:30:00.000Z”。我想要文本框中的内容,即“01/05/2012”。
如何解决这个问题。
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope)
$scope.today = function()
$scope.dt = new Date();
;
$scope.dates = [ date:'01/01/2012',isOpen:false, isDisabled:false, date:'05/05/2000',isOpen:false, isDisabled:false, date:'',isOpen:false, isDisabled:true];
$scope.today();
$scope.clear = function ()
$scope.dt = null;
;
// Disable weekend selection
$scope.disabled = function(date, mode)
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
;
$scope.toggleMin = function()
$scope.minDate = $scope.minDate ? null : new Date();
;
$scope.toggleMin();
$scope.open = function($event, date)
$event.preventDefault();
$event.stopPropagation();
date.isOpen=true;
$scope.opened = true;
;
$scope.dateOptions =
formatYear: 'MM/dd/yyyy',
startingDay: 1
;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = 'MM/dd/yyyy';
);
</script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<h4>Popup</h4>
<br/>
<br/>
My Dates object dates
<br/>
<br/>
<div class="row" ng-repeat='x in dates'>
<span style="margin-left:20px">x.date</span>
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="format" ng-model="x.date" is-open="x.isOpen" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" ng-disabled="x.isDisabled" class="btn btn-default" ng-click="open($event,x)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<br/>
<br/>
</div>
<hr />
</div>
</body>
</html>
【问题讨论】:
【参考方案1】:您的模型实际上具有正确的价值。 .000Z 是秒的小数部分,Z 表示 UTC 时区。
http://www.w3.org/TR/NOTE-datetime http://en.wikipedia.org/wiki/ISO_8601【讨论】:
【参考方案2】:这里有同样的问题:
Angular bootstrap datepicker date format does not format ng-model value
并且有人回答了它。您可以参考上面的链接。
它对我有用!
【讨论】:
以上是关于Angular JS bootstrap ui日历问题的主要内容,如果未能解决你的问题,请参考以下文章
Angular Js ui.bootstrap 选项卡自定义
Angular JS UI Bootstrap 选项卡 (ui.bootstrap.tabs) 导致页面在选择时滚动/跳转
Angular UI Bootstrap datepicker:ng-readonly 支持
我应该使用 Angular UI Bootstrap 还是普通的 Bootstrap 3? [关闭]