无法在 angularUI 日期选择器中设置日期

Question

以下是我的会员编辑页面 (member-edit.html) 中的代码，其中我从 API 获取结婚纪念日和加入日期并将其设置在 vm.member.marriage_anniversary & vm.member.joining_date 来自 memberEditCtrl 控制器。

在 vm.member.marriage_anniversary 我得到这样的价值 - 2016-06-23 18:30:00

模板代码(成员-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 '';
  };
}]);

虽然这个日期选择器在添加大小写时工作正常。

让我知道我做错了什么。

Answer 1

所以，您似乎从服务器获得了 sql DateTime，它在 angular 中表现不佳（参见 https://github.com/angular/angular.js/issues/4475）

尝试从您的 sql 日期时间最初创建一个日期对象？

vm.member.marriage_anniversary = new Date(vm.member.marriage_anniversary)

否则请提供完整的 plunkr，以便我可以更深入地帮助您，您还可以创建一个过滤器或可以为您完成日期的东西

无法在 angularUI 日期选择器中设置日期

Unable to set date in angularUI datepicker

javascript

datepicker

angularjs

angularjs-scope

angular-ui-bootstrap