Question

我有使用jquery的datepicker。它在页面加载时有效，因为我在控制器中设置了默认日期。选择一个日期是可以的，但问题是当你使用角度js得到的值没有更新时，总是默认值。任何人如何在jquery选择和设置日期时更新值。非常感谢您的帮助，并提前致谢。

HTML

<input type="text" id="date1"  name="date1" ng-model="data.date1">
<input type="text" id="date2"  name="date2" ng-model="data.date2">
<button type="button" ng-click="get()">Test Value</button>

jquery的

$('#date1').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {
}});

$('#date2').datepicker({
language: 'en',
autoClose:true,
dateFormat: 'd MM yyyy',
onSelect: function (fd, date, picker) {


}});

angular js

var app = angular.module('app', []);
app.controller('MainController', function($scope, $http){
 $scope.data = {};

 // default date
 $scope.data.date1  = new Date();
 $scope.data.date2  = moment(new Date()).add(1, 'days');

 $scope.get = function(){
    console.log($scope.data.date1);
    console.log($scope.data.date2);
 }});

Answer 1

如果您打算多次使用datepicker，我建议您创建指令并使用它。

指令

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

HTML

<input type="text" ng-model="date1" datepicker />
<input type="text" ng-model="date2" datepicker />

有关详细信息，请查看此Plunker

设置Jquery的值后更新输入ng-model

1 个答案: