CODEWITHSUNDEEP
javascriptangularjs
Arnold wanna be
Arnold wanna be

Reputation: 483

Angularjs : Date type in angularjs input using ng-model returns undifined

Hello guys i have some issue using date type and ng-model together. in my index.html i have the input field like this :

<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

and my controller : 

$scope.myExample = function() {
    console.debug('date : ', $scope.myData.date);
}

in my console i get the log "date : undefined"

what seems to be the problem why i'm having undefined value? thanks

by the way im using "bootstrap-datepicker"

Upvotes: 1

Views: 807

Answers (4)

Enzo Maccerata
Enzo Maccerata

Reputation: 1

For me it helped to insert a placeholder attribute into the input tag, whose value is e.g.:

placeholder="yyyy-MM-dd" (cause this works for me as well: placeholder="dd.MM.yyyy")

<input class="form-control" type="date" id="date" ng-model="myData.date" placeholder="dd.MM.yyyy" />

After that the ng-model processed it correctly and stored the value. In fact, in the documentation it is mentioned in the example https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

Upvotes: 0

Nitesh Rana
Nitesh Rana

Reputation: 512

Another solution can be passing the date value through your function.

This is how I have achieved this.

CODE:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>

  <body ng-controller="myController">
    <input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample(myData.date)">Submit</button>
<script>

  angular.module("myApp",[])
  .controller("myController",function($scope){
    $scope.myExample = function(date) {
      console.log(date);
    alert(date);
}

  })
</script>
  </body>

</html>

You can also use date filter available in angularjs. See documentation here https://docs.angularjs.org/api/ng/filter/date

Upvotes: 0

Sravan
Sravan

Reputation: 18647

Here is the required solution using bootstrap-datepicker

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myData = {}
    $scope.myData.date = new Date();
    $scope.myExample = function() {
     console.debug('date : ', $scope.myData.date);
      console.log('date : ', $scope.myData.date);
    }

});
<html>
<script src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>



<body>
<script>
$('#date').datepicker() 
</script>
<div ng-app="myApp" ng-controller="myCtrl">

<input class="form-control" type="date" id="date" ng-model="myData.date" />
<button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

</div>

</body>
</html>

Please run the above snippet

HERE IS A WORKING DEMO

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

You have to init your myData object

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = {}; //Create the object 
  $scope.myExample = function() {
    console.log('date : ', $scope.myData.date);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <input class="form-control" type="date" id="date" ng-model="myData.date" />
  <button type="submit" class="btn btn-primary" ng-click="myExample()">Submit</button>

</div>

Upvotes: 1

Related Questions