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




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

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

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.



I am using bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ 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.

Html

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

Controller

$(function() {

    //for displaying datepicker

    $('#datetimepicker').datetimepicker({
        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:

set

ng-model="date"

on your angular controller:

    $scope.date = '';

    $('#check-out').datepicker().on('changeDate', function (ev) {
        $scope.date= $('#check-out').val();
        $scope.$digest();
        $scope.$watch('date', function (newValue, oldValue) {
             $scope.date= 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[$(ev.target).attr('dp-model')] = $(ev.target).val();
});

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
        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            language:'fa'
        });
        //for getting input value
        $('.date').on("changeDate", function() {
            $scope.selecteddate = $(".date").val();
        });

    });




datepicker