Question

我在html页面中使用了一个datepicker，如下所示：

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

主要控制器

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


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

当网页被提交时，我正在主窗体控制器中重新开始日期，但格式与我的日期选择器弹出窗口中显示的格式不同。选择后显示的格式例如是＆＃39; 26/03 / 2014＆＃39;。但是，在我的控制器中，我得到： 2014年3月26日星期四00:00:00 GMT 0000（格林威治标准时间标准时间）

请问，如何在控制器中显示日期格式，而不是＆＃34; 2014年3月26日星期二00:00:00 GMT 0000（格林尼治标准时间标准时间）＆＃34; ????

Answer 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'); 
});

Answer 2

您只需在角度过滤方法中获取模型值，并提供所需的日期格式。还需要在控制器中定义$filter。

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

Answer 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具有相同的效果。

Controller中的AngularJS UI Bootstrap Datepicker日期格式不正确

3 个答案: