2016-12-02 117 views
1

我在我的模式中使用angular-material-datetimepicker来输入日期和时间。但是,angular在json中发送所有数据服务器端,并将时间更改为UTC。在重新加载我的客户端时,显示我不想要的UTC时间。我如何让客户端显示当地时间(在我的情况下是GMT + 2)?我如何操纵json字符串的日期部分?我在其他类似SO q和论坛上看到了令人困惑的解决方案。谢谢。Angularjs datetime-picker timezone

在HTML模式

 <div class="time"> 
      <md-input-container class="md-input-has-placeholder start_time"> 
       <label>Start Date/Time</label> 
       <input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime" placeholder="Start" min-date="date" format="DD/MM/YYYY hh:mm" ng-model="Project.StartAt" class=" md-input"> 
      </md-input-container> 

      <md-input-container class="md-input-has-placeholder endtime"> 
       <label>End Date/Time</label> 
       <input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime" placeholder="End" min-date="date" format="DD/MM/YYYY hh:mm" ng-model="Project.EndAt" class=" md-input"> 
      </md-input-container> 
     </div> 

$scope.editProject = function(data) { 
     $scope.showSelected = true; 
     $scope.SelectedProject = data; 
     var fromDate = moment(data.start).format('DD/MM/YYYY LT'); 
     var endDate = moment(data.end).format('DD/MM/YYYY LT'); 

     $scope.Project = { 
      ProjectID : data.projectID, 
      Client : data.client, 
      Title : data.title, 
      Description: data.description, 
      Employees: data.employees, 
      StartAt : fromDate, 
      EndAt : endDate, 
      IsFullDay : false 
     } 
     $scope.ShowModal() 
    }, 

$scope.ShowModal = function(){ 
     $scope.option = { 
      templateUrl: 'modalContent.html', 
      controller: 'modalController', 
      controllerAs: '$ctrl', 
      backdrop: 'static', 
      resolve: { 
       Project : function() { 
        return $scope.Project; 
       }, 
       SelectedProject : function() { 
        return $scope.SelectedProject; 
       }, 
       projects: function() { 
        return $ctrl.projects; 
       } 
      } 
     }; 

    var modal = $uibModal.open($scope.option); 
     modal.result.then(function (data) { 

      $scope.Project = data.project; 
      switch (data.operation){ 
       case 'Save': 
        //Save here 
        $http({ 
         method: 'POST', 
         url: '/', 
         data: $scope.Project 
        }).then(function(response){ 
         if(response.data.status){         
          $scope.projects.push(Project); 
         } 
        }) 
        break; 
+0

我改为通过添加时刻时区库解决。 –

回答

2

您可以应用过滤器,像:

$scope.yourDate= $filter('date')(new Date($scope.yourDate), 'yyyy-MM-dd'); // Try different format as per your requirement 

不要忘记注入依赖性$ filter。

+0

我编辑了上面的角度以显示执行功能。不确定我从您的解决方案中了解如何在使用外部组件时进行解决。你可以根据我的设置显示吗? –