角度ng模型不绑定jQuery日期选择器值

新手在角度js中 - 我正在尝试将jQuery日期选择器添加到ng模型文本框中。以下是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" />

j查询日期选择器代码：

<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中获取日期，而且我的验证不适用于文本框，因为它不考虑日期作为通过日期选择器的输入。

请帮我做一个工作弹道

机

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

更新模型
我的情况，您可以在您的控制器中更新您的模型，如下所示：

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

}）;

依此类推选择设置模型值并应用范围。
我做了一个扑通器来说明 https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview

添加触发事件
您可以添加一个触发器处理程序来获取更改事件并通过以下方式通知角度：

 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

相关内容

最新更新

热门标签：