angularjs and value of jqueryui datepicker input box

Question

I have a datapicker of jqueryUI:

<div class="span4">
 <label>Start Date; </label>
 <input type="text" name="sDate" id="datepicker1" ng-model="item.date.sDate" class="ng-pristine ng-valid hasDatepicker">
 <label>End Date; </label>
 <input type="text" name="eDate" id="datepicker2" ng-model="item.date.eDate" class="ng-pristine ng-valid hasDatepicker">
 <br> <br>
 <button ng-click="add()" type="submit" class="btn btn-success">Next</button>

The datepicker is working fine, but when i click Next button which trigger the add function, I cannot get item.date.eDate value...

Simon E. · Accepted Answer · 2013-06-20 05:53:58Z

4

I've just been trying the same thing, and found that I didn't actually need to use a directive, just this code...

$.datepicker.setDefaults({
    // When a date is selected from the picker
    onSelect: function(newValue) {
        if (window.angular && angular.element)
            // Update the angular model
            angular.element(this).controller("ngModel").$setViewValue(newValue);
    }
});

Just place it prior to your .datepicker() initialisation code.

answered Jun 20, 2013 at 5:53

Simon E.

59.2k18 gold badges146 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Campbeln Over a year ago

This is awesome, thanks! I have a bundle of functions in a .factory, and I've added this into it:

factory.syncScope = function (el) { var $e = $(el), e = $e[0]; angular.element(e).controller("ngModel").$setViewValue($e.val()); };

though you could add in your if (window.angular && angular.element) as well (but it's in a factory, so we KNOW it's there ;) Then attach syncScope to the onChange and make sure that onChange is fired and Bob is your uncle!

Andrew Dyster · Accepted Answer · 2013-02-05 05:07:42Z

AngularJS and jQuery don't work too well together. You need to use a directive. Here's a quick sample app version I created for you:

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8" />  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>  
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  <script>
    function putObject(path, object, value) {
    var modelPath = path.split(".");

    function fill(object, elements, depth, value) {
        var hasNext = ((depth + 1) < elements.length);
        if(depth < elements.length && hasNext) {
            if(!object.hasOwnProperty(modelPath[depth])) {
                object[modelPath[depth]] = {};
            }
            fill(object[modelPath[depth]], elements, ++depth, value);
        } else {
            object[modelPath[depth]] = value;
        }
    }
    fill(object, modelPath, 0, value);
    }
    var directives = angular.module('myApp', []);

    directives.directive('datepicker', function() {
       return function(scope, element, attrs) {
           element.datepicker({
               inline: true,
               dateFormat: 'dd.mm.yy',
               onSelect: function(dateText) {
                   var modelPath = $(this).attr('ng-model');
                   putObject(modelPath, scope, dateText);
                   scope.$apply();
               }
           });
       }
    });

  function myCtrl($scope) {
        $scope.item = ""
        $scope.add = function() {
            $scope.$apply()
            alert($scope.item)
        }
  }
  </script>
</head>
<body ng-app="myApp">
 <div ng-controller="myCtrl">
{{item}}
<p>Date: <input type="text" datepicker id="datepicker" ng-model="item" /></p>
 <button ng-click="add()" type="submit" class="btn btn-success">Next</button>
 <br />

 </div>
</body>
</html>

Check out http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html for a a more thorough explanation.

@AndreDyster i have a question about the date format, it doesn't update from the default which is mm.dd.yy* and i need the regular one like this dd.mm.yy
This answer kinda old. Doing a quickly google search, theres a jQuery UI directive available now. Check out github.com/angular-ui/ui-date. Looks like it contains a ui-date-format parameter you can set.

Ahmer · Accepted Answer · 2014-09-12 21:46:01Z

just need to replace this element.datepicker({ to $(element).datepicker({

directives.directive('datepicker', function() {
       return function(scope, element, attrs) {
           $(element).datepicker({
               inline: true,
               dateFormat: 'dd.mm.yy',
               onSelect: function(dateText) {
                   var modelPath = $(this).attr('ng-model');
                   putObject(modelPath, scope, dateText);
                   scope.$apply();
               }
           });
       }
});

Farzad Yousefzadeh · Accepted Answer · 2015-08-11 07:51:05Z

Actually turns out you don't have to make any inline directive or play around with the $.datepicker. Only helpful i came up with was to get the value of datepicker element not by the ng-model directive. suppose you have 3 inputs, first name, last name and date of birth. the date of birth input contains the jquery ui datepicker. get the value of first name and last name input by ng-model directive< BUT to get the value of date of birth, just use jquery .val() function.

Collectives™ on Stack Overflow

angularjs and value of jqueryui datepicker input box

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Related