Question

角度js中的新手 - 我正在尝试将jQuery日期选择器添加到ng-model文本框中。以下是jQuery日期选择器的链接：

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日期选择器代码：

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

这是我的HTML标记：

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

日期选择器的工作方式就像魅力一样，但我面临的问题是日期与我的角度模型没有约束，我无法在$ scope中获取日期加上我的验证不能在文本框上工作，因为它不会将日期视为日期选择器的输入。

请帮助我使用一名工作人员

Answer 1

使jQuery输入和角度模型直接开箱即用是一个问题，这意味着您经常需要手动执行某些操作来更新模型或告诉角度输入事件已被触发。

更新型号
我的情况你可以在你的控制器中更新你的模型，例如：

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

}）;

所以onSelect你设置模型值并应用范围。
我已经做了一个说明https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview

的人

添加触发事件
你可以添加一个triggerhandler来获取change事件并以这种方式通知angular：

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

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

制作一名能够看到这一点的人：https://plnkr.co/edit/VQAqZcLarDBTW2MFaOY7?p=preview

Angular ng-model不绑定jQuery日期选择器值

1 个答案: