日期未显示在 angular-bootstrap 日期选择器中 - IT屋-程序员软件开发技术分享社区
首页 前端开发 日期未显示在 angular-bootstrap 日期选择器中
日期未显示在 angular-bootstrap 日期选择器中
[英] Date not showing up in angular-bootstrap datepicker
本文介绍了日期未显示在 angular-bootstrap 日期选择器中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含一些日期的表格，我正在尝试使用 angular ui bootstrap 来获取日期选择器来编辑它们.
虽然日期选择器可以正常弹出并允许我选择一个没有问题的日期，但在我从弹出窗口中选择一个新日期之前，日期本身不会出现在输入中.
可以用这个代码重新创建:
<html ng-app="ui.bootstrap.demo"><头><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script><script src="example.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><身体><风格>.full 按钮跨度 {背景色:柠檬绿；边框半径:32px；颜色:黑色;}.部分按钮跨度{背景颜色:橙色；边框半径:32px；颜色:黑色;}</风格><div ng-controller="DatepickerPopupDemoCtrl"><表格><tr ng-repeat="eventFixtures track by $index 中的事件"><td><div class="row"><div class="col-md-6"><p class="输入组"><input type="text" class="form-control" ng-model="event.date" uib-datepicker-popup="dd/M/yyyy" is-open="event.isOpen" ng-click=event.isOpen = true;"/></p>
</td></tr></tbody>
</html>还有这个:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {$scope.eventFixtures = [{名称:1"，日期:1-1-01"}，{名称:2"，日期:2-2-02"}，{名称:3"，日期:3-3-03"}，{名称:4"，日期:4-4-04"}，{名称:5"，日期:5-5-05"}];});
解决方案
想通了，问题是日期数据源是字符串而不是日期对象.当您选择一个新的数据对象时，它会被写入变量，但在那之前它是一个字符串，因此不会.
如果你在 eventFixtures 声明之后写这个，它会转换日期并说明问题:
for(var i = 0; i <$scope.eventFixtures.length; i++) {$scope.eventFixtures[i].date = new Date($scope.eventFixtures[i].date);}
I have a table which conatians some dates and I am trying to use angular ui bootstrap to get a datepicker to edit them.
While the datepicker pops up fine and allows me to select a date with no issue, the date itself does not appear in the input until after I have selected a new one from the popup.
Can be recreated with this code:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerPopupDemoCtrl">
<table>
<tbody>
<tr ng-repeat="event in eventFixtures track by $index">
<td>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" ng-model="event.date" uib-datepicker-popup="dd/M/yyyy" is-open="event.isOpen" ng-click="event.isOpen = true;" />
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and this:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
$scope.eventFixtures = [
{name: "1", date: "1-1-01"},
{name: "2", date: "2-2-02"},
{name: "3", date: "3-3-03"},
{name: "4", date: "4-4-04"},
{name: "5", date: "5-5-05"}
];
});
解决方案
Figured it out, the issue was the date data source is a string not a Date object. When you select a new data object it is written into the variable but until then it's a string and as such won't.
If you write this after the eventFixtures declaration, it will transform the dates and illustrate the issue:
for(var i = 0; i < $scope.eventFixtures.length; i++) {
$scope.eventFixtures[i].date = new Date($scope.eventFixtures[i].date);
}
这篇关于日期未显示在 angular-bootstrap 日期选择器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
