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 1 down vote favorite

Kindly help me to solve this issue. I am using jquery datepicker with AngularJS. I am trying to get the selected date and pass it with a function as parameter. For this I am using the following code.

Html:

<input type="text" "ng-model="gettingStartDate" ng-change="newTest(gettingStartDate)" />

Date Picker:

$( "#date1" ).datepicker();

AngularJS:

function getOrg($scope, $http) {

  $scope.newTest = function(start_date){
     alert(start_date); 
  };

}
share|improve this question
    
Anything that happens within the realm of a jQuery function or plugin needs to be applied to the Angular scope. Check out $scope.$apply: docs.angularjs.org/api/ng/type/$rootScope.Scope –  m.e.conroy Mar 17 '14 at 13:16

3 Answers 3

up vote 0 down vote accepted

Such complex UI components need to be wrapped into a directive to maintain a model data binding. For the jQuery datepicker, you can check this question, or google around "jquery datepicker directive".

share|improve this answer
    
Thanks @davidb583. This link works fine. jsfiddle.net/kevinj/TAeNF/2 –  Kirubanandan.K Mar 18 '14 at 7:47
up vote 1 down vote 
<input type="text" id="date1" datepicker1 ng-model="gettingStartDate" />

var app = angular.module('reports', [])
.directive("datepicker1", function () {
return {
 restrict:"A",
 link:function($scope, $element, $attr, $controller){
  $element.datepicker({ 
    changeMonth: false,
    showOtherMonths: true,
    numberOfMonths: 2,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    onSelect: function (date) {
       $scope.gettingStartDate = date;
       $scope.$apply();
       $scope.fromDateSend(date); // function call
    },
    onClose: function( selectedDate ) {
       $( "#date2" ).datepicker( "option", "minDate", selectedDate );
    }
  });
 }
};
})
share|improve this answer
up vote 0 down vote

You should change the entire approach. Using jQueryUI datepicker directive:

angular
    .module('App',['ui.date'])
    .directive('customDatepicker',function($compile){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '='
            },
            link: function($scope, $element, $attrs, $controller){
                var $button = $element.find('button');
                var $input = $element.find('input');
                $button.on('click',function(){
                    if($input.is(':focus')){
                        $input.trigger('blur');
                    } else {
                        $input.trigger('focus');
                    }
                });
            }    
        };
    })

See demo

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.