Deepankar Bajpeyi Deepankar Bajpeyi - 20 days ago 11
AngularJS Question

how to bind Bootstrap-datepicker element with angularjs ng-model?

Here is the html for the date field :

<div class='form-group'>
<label>Check out</label>
<input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>


The datepicker shows up in the input field. However if I do this in my controller :

console.log($scope.checkOut);


I get
undefined in the javascript console
.
How to solve this ?

Is there a better way to use
bootstrap-datepicker
with
angularjs
?

I don't want to use
angular-ui/angular-strap
since my project is bloated with javascript libraries.

Answer

As @lort suggests, you cannot access the datepicker model from your controller because the datepicker has its own private scope.

If you set: ng-model="parent.checkOut"

and define in the controller: $scope.parent = {checkOut:''};

you can access the datepicker using: $scope.parent.checkOut

Comments