current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

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>

share|improve this question

2 Answers 2

up vote 0 down vote

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

share|improve this answer
    
Is jquerydirective also in angular ? I've tried doing what you said. Still got no improvement at all. –  Mijevoli Feb 24 at 1:15
up vote 0 down vote accepted

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>

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.