獲取ui.bootstrap.datepicker值，而時間/時區

我需要能夠存儲選定的日期值日期沒有NG我的模型的時間。獲取ui.bootstrap.datepicker值，而時間/時區

這是我的視圖：

<script type="text/ng-template" id="form_field_datetime"> 
    <h3 style="color:coral ;">{{field.displayName}}</h3> 
    <br /> 
    <div> 
    <div ng-controller="dateCtrl"> 
     <p class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 

     </p> 
    </div> 
    </div> 
</script>

enter image description here

在我的NG-模型中的存儲值以上所示的日期的選擇是：

2012-03-12T22:00:00.000Z

我需要：

2012-03-13

這裏是控制器（幾乎和example一樣）：

app.controller('dateCtrl', ['$scope', 
     function ($scope) { 
     $scope.open = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
      formatYear: 'yy', 
      startingDay: 0 
     }; 

     $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

     } 
    ]);

如何解決這個問題？

來源

2015-05-12 Al Ex Tsm

你使用的是什麼版本的ui.bootstrap？在這種情況下你有這個bug嗎？當您使用日期選擇器選擇日期時，或者當您使用ng模型預加載日期時？ –

版本：0.12.1 - 2015-02-20從彈出式日曆中選擇時發出的問題。初始加載從模型中正常工作。 –

在0.13.0版本中修正了這個錯誤。如果您在日期選擇器中選取日期時格式無誤，但在ng模型中已有值時，格式爲「2012-03-12T22：00：00.000Z」。這是因爲這個錯誤。 –

我用我在我的問題來處理所選擇的日期和刪除時間信息的評論前面提到的指令。

<script type="text/ng-template" id="form_field_date"> 
    <h3 style="color:coral ;">{{field.displayName}}</h3> 
    <br /> 
    <div> 
    <div ng-controller="dateCtrl"> 
     <p class="input-group"> 
      <input datepicker-localdate type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 

     </p> 
    </div> 
    </div> 
</script>

控制器（dateCtrl）：

app.controller('dateCtrl', ['$scope', 
     function ($scope) { 
     $scope.open = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
      formatYear: 'yy', 
      startingDay: 0 
     }; 

     $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

     } 
    ]);

的指令（日期選擇器-LOCALDATE的）：

app.directive('datepickerLocaldate', ['$parse', function ($parse) { 
    var directive = { 
     restrict: 'A', 
     require: ['ngModel'], 
     link: link 
    }; 
    return directive; 

    function link(scope, element, attr, ctrls) { 
     var ngModelController = ctrls[0]; 

     // called with a JavaScript Date object when picked from the datepicker 
     ngModelController.$parsers.push(function (viewValue) { 
      console.log(viewValue);console.log(viewValue);console.log(viewValue); 
      // undo the timezone adjustment we did during the formatting 
      viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset()); 
      // we just want a local date in ISO format 
      return viewValue.toISOString().substring(0, 10); 
     }); 
    } 
}]);

它所有的工作吧！

來源

2015-05-12 15:20:29

獲取ui.bootstrap.datepicker值，而時間/時區

回答

相關問題