jqueryui datepicker输入框的angularjs和值答案

【问题标题】：angularjs and value of jqueryui datepicker input boxjqueryui datepicker输入框的angularjs和值
【发布时间】：2015-08-11 15:51:05
【问题描述】：

我有一个 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>

日期选择器工作正常，但是当我单击触发添加功能的下一步按钮时，我无法获取 item.date.eDate 值...

【问题讨论】：

标签： jquery-ui angularjs

【解决方案1】：

我一直在尝试同样的事情，发现我实际上不需要使用指令，只需这段代码......

$.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);
    }
});

只需将它放在您的.datepicker() 初始化代码之前。

【讨论】：

这太棒了，谢谢！我在 .factory 中有一组函数，我已将其添加到其中：factory.syncScope = function (el) { var $e = $(el), e = $e[0]; angular.element(e).controller("ngModel").$setViewValue($e.val()); }; 尽管您也可以添加 if (window.angular && angular.element)（但它在工厂中，所以我们知道它在那里；）然后附加syncScope onChange 并确保 onChange 被解雇并且 Bob 是你的叔叔！

【解决方案2】：

AngularJS 和 jQuery 不能很好地协同工作。您需要使用指令。这是我为您创建的快速示例应用版本：

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

查看http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html 以获得更详尽的说明。

【讨论】：

@AndreDyster 我对日期格式有疑问，它不会从默认的 mm.dd.yy* 更新，我需要像这样的常规格式dd.mm.yy
这个答案有点老了。做一个快速的谷歌搜索，现在有一个 jQuery UI 指令可用。查看github.com/angular-ui/ui-date。看起来它包含一个您可以设置的 ui-date-format 参数。

【解决方案3】：

只需要将这个element.datepicker({ 替换为$(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();
               }
           });
       }
});

【讨论】：

【解决方案4】：

实际上，您不必编写任何内联指令或使用 $.datepicker。我想出的唯一有用的是获取 datepicker 元素的值，而不是通过 ng-model 指令。假设您有 3 个输入，名字、姓氏和出生日期。出生日期输入包含 jquery ui datepicker。获取由ng-model指令输入的名字和姓氏的值

【讨论】：