单击日期时AngularJS DatePicker不会更新值答案

【问题标题】：AngularJS DatePicker not updating the value when a date is clicked单击日期时AngularJS DatePicker不会更新值
【发布时间】：2017-05-09 08:21:54
【问题描述】：

我正在使用 angularjs 的 datepicker 指令从 Angular 材料中创建日历以输入日期。

HTML

<md-datepicker ng-model='vm.endtoDate'></md-datepicker>

我面临的问题是，当我点击日历上的任何日期时，它都不会更新。

 function SearchController($scope,$stateParams, $q, $log, httpRequests, $location, searchResults, header, icons,leafletData){
      var coordinates_selected;
      var vm = this;
      vm.endtoDate = new Date();
      var endto= console.log(JSON.stringify(vm.endtoDate,'end'));

P.S 我不想使用 watch 函数来监视更改的值，因为我以后想将值存储在另一个变量中以进行时间搜索。

【问题讨论】：

控制台中的任何错误？它将适用于您在问题中显示的内容
@SaEChowdary 没有，但是当我尝试将 'endtoDate' 存储到另一个变量时，它仍然显示上一个日期
你如何将更改后的日期传递给另一个变量？？
所以您在更改日期后查看控制台对吗？？
添加$watch 和debugger; .. 有什么变化？

标签： javascript angularjs datepicker

【解决方案1】：

如果您不想要观察者或其他东西，我建议您使用日期选择器进行更改事件，并使用该存储更改的日期并在您想要的任何地方使用它

angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
 var endto= $scope.endtoDate;
 console.log(endto);
}
});

<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
    
    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" >
  
   
      <md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
      
      
 
    
   
  </div>
  </body>
</html>

【讨论】：

【解决方案2】：

angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
 var endto= $scope.endtoDate;
 console.log(endto);
}
});

<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
    
    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" >
  
   
      <md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
      
      
 
    
   
  </div>
  </body>
</html>

【讨论】：