javascript - way - uib-datepicker-popup ng-model not working

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

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">

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


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.

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

I am using bootstrap 3 datepicker and angularjs, i had same problem with ng-model,so i am getting input date value using bootstrap jquery function, below is the code in my controller,it's worked for me.


<input class="form-control" name="date" id="datetimepicker" placeholder="select date">


$(function() {

    //for displaying datepicker

        viewMode: 'years',
        format: 'DD/MM/YYYY',

    //for getting input value

    $("#datetimepicker").on("dp.change", function() {

        $scope.selecteddate = $("#datetimepicker").val();
        alert("selected date is " + $scope.selecteddate);



I have the same problem and resolve like this

added in html part

<input class="someting" id="datepicker" type="text" placeholder="Dae" ng-model=""/>

and simple in Controller call

$scope.btnPost = function () {

          var dateFromHTML = $('#datepicker').val();

One of ways around: set the id field to the input, then call document.getElementById('input_name').value to get the value of the input field.

This worked for me:



on your angular controller:

    $ = '';

    $('#check-out').datepicker().on('changeDate', function (ev) {
        $ $('#check-out').val();
        $scope.$watch('date', function (newValue, oldValue) {
             $ newValue;

My actual trouble was that the value of the model was not reflected till another component on the scope was changed.

Using this datepicker I had the same problem. I solved it using a little trick.

In the inputs tag I added a new attribute (dp-model):

<input class="form-control dp" type="text" dp-model="0" />
<input class="form-control dp" type="text" dp-model="1" />

And then in the js file I forced the binding in this way:

$scope.formData.dp = []; // arrays of yours datepicker models
$('.dp').datepicker().on('changeDate', function(ev){
    $scope.formData.dp[$('dp-model')] = $(;

im using this , and my code :

    this.todayNow = function () {
        var rightNow = new Date();
        return rightNow.toISOString().slice(0,10);
    $scope.selecteddate = this.todayNow();

    $(function() {
        //for displaying datepicker
            format: 'yyyy-mm-dd',
        //for getting input value
        $('.date').on("changeDate", function() {
            $scope.selecteddate = $(".date").val();