CODEWITHSUNDEEP
angularjs
Rye
Rye

Reputation: 189

Update input ng-model after setting the value of Jquery

I had datepicker using jquery. It works when the page is loaded because i set the default date in my controller. Picking a date is ok but the problem is when you get the value using angular js its not updated, always the default value. Anyone how to update the value when date is selected and set by jquery. Really appreciate your help and thanks in advance.

html

<input type="text" id="date1"  name="date1" ng-model="data.date1">
<input type="text" id="date2"  name="date2" ng-model="data.date2">
<button type="button" ng-click="get()">Test Value</button>

jquery

$('#date1').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {
}});

$('#date2').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {


}});

angular js

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http){
 $scope.data = {};

 // default date
 $scope.data.date1  = new Date();
 $scope.data.date2  = moment(new Date()).add(1, 'days');

 $scope.get = function(){
    console.log($scope.data.date1);
    console.log($scope.data.date2);
 }});

Upvotes: 0

Views: 450

Answers (1)

USS
USS

Reputation: 470

If you are about to use datepicker more than one time, I suggest to create directive and just use it.

Directive 

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

HTML 

<input type="text" ng-model="date1" datepicker />
<input type="text" ng-model="date2" datepicker />

For more detail, just check this Plunker

Upvotes: 1

Related Questions