控制器中的 AngularJS UI Bootstrap Datepicker 日期格式不正确答案

【问题标题】：AngularJS UI Bootstrap Datepicker Date Format in Controller is not correct控制器中的 AngularJS UI Bootstrap Datepicker 日期格式不正确
【发布时间】：2014-03-26 11:53:00
【问题描述】：

我在我的 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>

日期选择器控制器

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];
};

主控制器

app.controller('UpdateShoppingBasketCtrl', ['$scope', 'ShoppingBasketFactory', '$location',
                                  function ($scope, ShoppingBasketFactory, $location) {


        alert('START DATE = '+ $scope.startDate );
}]);

提交网页后，我正在主表单控制器中检索日期，但格式与日期选择器弹出窗口中显示的格式不同。选择后显示的格式例如是“26/03/2014”。但是，在我的控制器中，我得到： 2014 年 3 月 26 日星期四 00:00:00 GMT 0000（GMT 标准时间）

请问，我如何在控制器中获取显示的日期格式，而不是“Thu Mar 26 2014 00:00:00 GMT 0000 (GMT Standard Time)”????

【问题讨论】：

标签： jquery angularjs angular-ui-bootstrap bootstrap-datepicker bootstrap-datetimepicker

【解决方案1】：

您可以使用date 过滤器来格式化日期。这是demo：

<body ng-app="MyApp" ng-controller="MyController">
   <div>{{date}}</div>
</body>

脚本：

angular.module('MyApp',[])
       .controller('MyController',function($scope,$filter){
    $scope.date = $filter('date')(Date.now(),'yyyy-MM-dd'); 
});

【讨论】：

感谢我的工程师同事，但转换对读取的值没有影响。注意：网页上的日期格式正确，问题在于我在控制器中阅读的内容。我试过： $scope.date = $filter('date')($scope.startDate,'yyyy-MM-dd');即用范围替换 Date.now() ，但没有乐趣。任何想法..
也许 startDate 是 String 而不是 Date 对象。所以尝试将其转换为Date 对象。您可以通过new Date($scope.startDate) 进行操作。
哇，成功了。老实说，我并没有考虑解析日期。我认为由于日期选择器的格式属性设置为“YYYY-MM-dd”，因此不需要在控制器中解析它。但是，我仍然认为 datepicker 应该是可配置的，所以我们不需要在 AngularJS Controller 中进行日期格式化。你怎么看？
实际上，日期选择器使用Date对象，而不是String。它只是根据指定的格式装饰并显示在视图中。例如，它就像一个 CSS。如果您的div 中有一些文本，通过对 div 应用一些样式，您会看到装饰的 div，而不仅仅是黑色文本。日期选择器也是如此。它“应用样式”到Date 对象。希望你能明白。
好的...非常感谢您的帮助。

【解决方案2】：

您只需要简单地以角度过滤器方法获取模型值并给出您想要的日期格式。还需要在控制器中定义$filter。

var dateValue =$filter('date')($scope.date, 'MM/dd/yyyy'),

【讨论】：

【解决方案3】：

虽然已经回答了这个问题，但我将提供一个替代方案，并提供一些更详细的信息。

问题实际上是Angular 1.3.0 rc0 and onwards 中发生的错误。除了使用$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();
    }
  }
})

这应该与使用 $filter 具有相同的效果。

【讨论】：