jQuery 控制器中的 AngularJS UI Bootstrap Datepicker 日期格式不正确
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22660191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS UI Bootstrap Datepicker Date Format in Controller is not correct
提问by Mega
I am using a datepicker in my html page as follows:
我在我的 html 页面中使用日期选择器，如下所示：
HTML
HTML
<div ng-controller="StartDateCtrl">
<label class="control-label" for="startDate"> Date:</label>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" name="startDate" class="form-control" show-button-bar="true" datepicker-popup="yyyy-MM-dd" ng-model="startDate" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
DATE PICKER CONTROLLER
日期选择器控制器
var StartDateCtrl= function ($scope) {
$scope.today = function() {
$scope.travelStartDate = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function () {
$scope.showWeeks = ! $scope.showWeeks;
};
$scope.clear = function () {
$scope.travelStartDate = 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) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
//$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
$scope.formats = ['yyyy-MM-dd'];
$scope.format = $scope.formats[0];
};
MAIN CONTROLLER
主控制器
app.controller('UpdateShoppingBasketCtrl', ['$scope', 'ShoppingBasketFactory', '$location',
function ($scope, ShoppingBasketFactory, $location) {
alert('START DATE = '+ $scope.startDate );
}]);
When the web page is submited, I am retriving the date in the main form controller but the format is different from what is displayed in my date picker popup. The format shown after selection is for instance '26/03/2014'. But, in my controller I get : Thu Mar 26 2014 00:00:00 GMT 0000 (GMT Standard Time)
提交网页时，我正在检索主表单控制器中的日期，但格式与日期选择器弹出窗口中显示的格式不同。选择后显示的格式是例如“26/03/2014”。但是，在我的控制器中，我得到：2014 年 3 月 26 日星期四 00:00:00 GMT 0000（GMT 标准时间）
Please, How do I get the displayed date format in the controller and NOT the "Thu Mar 26 2014 00:00:00 GMT 0000 (GMT Standard Time)"????
请问，如何在控制器中获取显示的日期格式，而不是“2014 年 3 月 26 日星期四 00:00:00 GMT 0000（GMT 标准时间）”？？？？
回答by Engineer
回答by Bittu Singh
You need to just simply get the model value in angular filter method and give the date formatting you want. One more thing its need to define $filterin your controller as well.
您只需要简单地获取角度过滤器方法中的模型值并提供您想要的日期格式。还有一件事需要$filter在您的控制器中定义。
var dateValue =$filter('date')($scope.date, 'MM/dd/yyyy'),
回答by Kenco
While this question was answered already, I'll provide an alternative, along with some more detail.
虽然已经回答了这个问题，但我将提供一个替代方案，以及更多细节。
The issue is actually a bug occurring in Angular 1.3.0 rc0 and onwards. Another solution, besides using $filter, is to define a custom directive as DaveWMdescribes:
该问题实际上是Angular 1.3.0 rc0 及更高版本中发生的错误。除了使用之外$filter，另一种解决方案是定义一个自定义指令，如下DaveWM所述：
directive('datepickerPopup', function (){
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
}
})
That should have the same effect as using $filter.
这应该与使用$filter.
