Angularjs and Jquery datepicker data-binding

Question

I was making a project with a datepicker(JQuery) . When i click the date in the datepicker it never shows the date unless space or enter is typed. I want it that when I click the date, the date clicked is showed.

I expect the output to be automatically show the date when clicking the date in datepicker. But I have to press spacebar first before it generates/ show the date .. Please help .. These are my codes :

  $(document).ready(function () {
                $("#datepickerfrom").datepicker({
                    numberOfMonths: 1,
                    onSelect: function (selected) {
                        $("#datepickerto").datepicker("option", selected)
                    }
                });
                $("#datepickerto").datepicker({
                    numberOfMonths: 1,
                    onSelect: function (selected) {
                        $("#datepickerfrom").datepicker("option", selected)
                    }
                });
               //  jQuery object; this demo
            });
            function GetbyDate(fr, t) {
                var from = new Date(t)
            };

            scope.changeDate = function () {
                scope.models = null;
                http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
                    function (data) {
                        scope.models = data;
                    });
            }

              <p class="input-group">

                                <input type="text" class="form-control" id="datepickerfrom" data-ng-model="filter_fromDate" />
                                
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </span>
                                {{filter_fromDate}}
                            </p>

                            <p class="input-group">
                                <input type="text" class="form-control" id="datepickerto" data-ng-model="filter_toDate" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </span>
                                {{filter_toDate}}
                            </p>

Answer 1

Yes ! I got the answer..

Thanks to this sample jsfiddle answer . I found out that the reason why I cant show the date is that I included it inside the controller.

Have a look on this :

var PRApp = angular.module('PRApp', []);
        PRApp.controller('PRCtrl', ['$scope', '$http', function (scope, http) {

            http.get('GetList').success(function (data) {

                scope.models = data;
                scope.sorting = "-PRDate";

                var i = 0;
                for (i = 0; i < scope.models.length; i++) {
                    scope.models[i].id = i;
                }
            });

            scope.getStatus = http.get('GetStatusList').success(function (status) {
                scope.StatusList = status
            });

            function GetbyDate(fr, t) {
                var from = new Date(t)
            };

            scope.changeDate = function () {
                scope.models = null;
                http.get('GetReportList?from=' + scope.filter_fromDate + '&to=' + scope.filter_toDate).success(
                    function (data) {
                        scope.models = data;
                    });
            }
            scope.jsonDatetotext = function (jsondate) {
                // jsondate format: /Date(#############)/
                // substr(6) will remove '/Date('
                // parseInt will convert remaing string '#############' to int and ignores ')/'
                return new Date(parseInt(jsondate.substr(6)));
            };


        }]);
        PRApp.directive('calendar2', function () {
            return {
                require: 'ngModel',
                link: function (scope, el, el2, attr, ngModel) {

                    attr.$observe("show", function (val) {
                        if (val == 'true') {
                            $(el).datepicker("show");
                        }
                        else {
                            $(el).datepicker("hide");
                        }
                    });

                    attr.$observe("show", function (val) {
                        if (val == 'true') {
                            $(el2).datepicker("show");
                        }
                        else {
                            $(el2).datepicker("hide");
                        }
                    });

                    $(el).datepicker({
                        minDate: '-5Y',
                        dateFormat: 'MM d, yy',
                        onSelect: function (dateText) {
                            scope.$apply(function () {
                                ngModel.$setViewValue(dateText);
                            });
                        }
                    });

                    $(el2).datepicker({
                        minDate: '-5Y',
                        dateFormat: 'MM d, yy',
                        onSelect: function (dateText) {
                            scope.$apply(function () {
                                ngModel.$setViewValue(dateText);
                            });
                        }
                    });

                }
            };
        });

<span class="input-group-addon">
                                    <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
                                </span>
                                <input data-show="{{show}}" type="text" name="filter_fromDate" calendar2 data-ng-model="filter_fromDate"
                                    class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />

                                 </div>

                                                    <br />

                        <div class="input-group">
                                <span class="input-group-addon">
                                    <span data-ng-click="show=!show" class="glyphicon glyphicon-calendar"></span>
                                </span>
                                <input data-show="{{show}}" type="text" name="filter_toDate" calendar2 data-ng-model="filter_toDate"
                                    class="form-control" placeholder="mm/dd/yyyy" data-ng-minlength="10" />
  
       
                             </div>   
                           <br />

                             <input type="submit" class="btn btn-primary btn-sm" value="GO" />

                        </div>

Answer 2

Code like this should always go into the link function of a directive. $(document).ready(function () {/**/} ^-- You should not use this at all.

One approach could be:

angular
  .module('app', [])
  .directive('thirdparty', jQueryDirective)


function jQueryDirective(){
  return {
    restrict: 'E',
    template: '<div id="foo"></div>',
    link: function(scope, element, attrs){
      $(element).append('appended with jquery')
    }
  }
}


angular.bootstrap(document, ['app'])

#foo {
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<thirdparty/>