以下是我的会员编辑页面(member-edit.html)中的代码,其中我从API获取结婚纪念日和加入日期的日期,并在vm.member.marriage_anniversary
& 来自vm.member.joining_date
控制器的memberEditCtrl
。
在vm.member.marriage_anniversary
我得到这样的价值 - 2016-06-23 18:30:00
模板代码( member-edit.html ) -
div class="form-group" ng-controller="DatepickerCtrl">
<label>Marriage Anniversary:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="vm.member.marriage_anniversary" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
</div>
</div>
<div class="form-group" ng-controller="DatepickerCtrl">
<label>Joining Date:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="vm.member.joining_date" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
</div>
</div>
我的DatepickerCtrl
代码 -
app.controller('DatepickerCtrl', ['$scope', function($scope){
$scope.today = function() {
$scope.dt = new Date();
};
$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.maxDate = new Date(2020, 5, 22);
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
}]);
虽然这个日期选择器在添加案例时工作正常。
让我知道我在这里做错了什么。
答案 0 :(得分:3)
所以,似乎你从你的服务器获得了一个sql DateTime,它在angular上表现不佳(参见https://github.com/angular/angular.js/issues/4475)
尝试从sql datetime初始创建日期对象?
vm.member.marriage_anniversary = new Date(vm.member.marriage_anniversary)
否则提供一个完整的plunkr所以我可以更深入地帮助你,你也可以创建一个过滤器或一些可以为你做日期的事情