CODEWITHSUNDEEP
javascriptangularjsdatepicker
Rehan
Rehan

Reputation: 441

AngularJS DatePicker not updating the value when a date is clicked

I am using the datepicker directive of angularjs from angular materials to create a calendar for input of date.

HTML

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

The problem i am facing is that when i click on any date on the calendar it does not gets updated.

JS

 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 i do not want to use the watch function to monitor the changed values as i later want to store the values in another variable for temporal searching.

Upvotes: 1

Views: 3035

Answers (2)

Rehan
Rehan

Reputation: 441

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>

Upvotes: 0

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

If u dont want a watcher or something else i suggest you to go for a change event with in date picker and by using that store the changed date and use it where ever you want 

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>

Upvotes: 1

Related Questions