Angular ng-model not binding jQuery date picker value

Question

Newbie in angular js - I am trying to add jQuery date picker to ng-model text box. Here are the links of jQuery date picker:

src="https://resources.ibe4all.com/BrokerAssist/js/BuroRaDer_DateRangePicker.js" type="text/javascript"></script><script type="text/javascript" src="https://resources.ibe4all.com/CommonIBE/js/jquery-1.4.1.js"></script<script type="text/javascript" src="https://resources.ibe4all.com/CommonIBE/js/jquery-ui-1.8.11.custom.min.js">

<link href="https://resources.ibe4all.com/BrokerAssist/cssnew/BuroRaDer.DateRangePicker.css" rel="stylesheet" />

jQuery date picker code:

<script>
$(document).ready(function () {
    $('#RDate').datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true
     });

    //$("#RDate").click(function () {
    //    $(this).focus();
    //});
});

function AvoidSpace(event) {
        var k = event ? event.which : window.event.keyCode;

        if (k == 32) return false;

    }
</script>

This is my HTML markup:

<body style="background-image: url(/Content/images/img_bg_2.jpg);" 
      ng-app="nmodule" ng-controller="ncontroller">
    <form name="userForm" novalidate="novalidate">
        <ng-form name="userForm" ng-submit="submitForm(userForm.$valid)">
             <input type="text"  name="RDate"  ng-model="RDate" id="RDate"  
                    placeholder="Enter Registration Date" required />
             {{RDate}}
        </ng-form>
    </form>
</body>

Date picker is working like a charm but, the problem I am facing is that the date is not binding with my angular model and I am not able to get date in $scope plus my validations are not working on the textbox because it is not considering date as input through date picker.

Please help me with a working plunker

Anders Vestergaard · Accepted Answer · 2017-01-15 09:35:13Z

It's allways a problem to make jQuery inputs and angular model to work straight out of the box this means that you often have to manually do something to update the model or tell angular that a input event has been fired.

Update model
I your situation you could update your model within your contoller, with something like:

app.controller('MainCtrl', function($scope) {

$('#RDate').datepicker({
  dateFormat: 'dd/mm/yy',
  changeMonth: true,
  changeYear: true,
  onSelect: function(date) {
    $scope.RDate = date;
    $scope.$apply();
    console.log($scope);
  }
});

});

So onSelect you set the model value and apply scope.
I've made a plunker to illustrate https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview

Add Trigger Event
You could add a triggerhandler to get the change event and notify angular this way:

 app.controller('MainCtrl', function($scope) {

    $('#RDate').datepicker({
      dateFormat: 'dd/mm/yy',
      changeMonth: true,
      changeYear: true,
      onSelect: function(date) {
            angular.element($('#RDate')).triggerHandler('input');
      }
    });
  });

Made a plunker to see this: https://plnkr.co/edit/VQAqZcLarDBTW2MFaOY7?p=preview

Collectives™ on Stack Overflow

Angular ng-model not binding jQuery date picker value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related