角ng模型不綁定jQuery日期選擇器值

角js新手 - 我試圖添加jQuery日期選擇器ng模型文本框。下面是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" />

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>

日期選取器工作就像一個魅力，但是，我面臨的問題是日期不與我的角度模型綁定，我無法獲得日期在$範圍加我的驗證不工作的文本框，因爲它不考慮日期作爲通過日期的輸入選擇器。

請幫我工作plunker

來源

2017-01-15 KarDinal Royce

這是百達做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); 
    } 
});

}）;

因此，請選擇您設置模型值和應用範圍。
我做了一個plunker說明https://plnkr.co/edit/kzdUPDcVDNGRoM9vlA4K?p=preview

添加觸發事件
你可以添加一個triggerhandler得到改變事件，並通知角是這樣的：

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

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

發了plunker看這個：https://plnkr.co/edit/VQAqZcLarDBTW2MFaOY7?p=preview

來源

2017-01-15 09:28:26

角ng模型不綁定jQuery日期選擇器值

回答

相關問題