即使从中选择另一个日期，JQueryUI DatePicker 也始终将今天的日期显示为选中状态答案

【问题标题】：JQueryUI DatePicker always displays todays date as selected even when selecting another date from it即使从中选择另一个日期，JQueryUI DatePicker 也始终将今天的日期显示为选中状态
【发布时间】：2018-05-13 00:38:17
【问题描述】：

我同时使用 AngularJS 和 JQuery UI DatePicker 以允许用户选择一个日期，我在同一页面上有两个日期。

我有一个自定义指令来处理 jQuery 和 AngularJS 之间的接口：

.directive('mydatepicker', function ($parse) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                var ngModel = $parse(attrs.ngModel);
                $(function () {
                    element.datepicker({
                        showOn: "both",
                        changeYear: true,
                        changeMonth: true,
                        dateFormat: 'dd/mm/yy',
                        onSelect: function (date, inst) {
                            scope.$apply(function (scope) {
                                ngModel.assign(scope, date);
                            });
                        }
                    });
                });
            }
        };
    })

我的 HTML 如下所示：

<input type="text" ng-model="mjaController.tempFiltering.fromDate" mydatepicker />
<input type="text" ng-model="mjaController.tempFiltering.toDate" mydatepicker />

只是为了证明ngModel的值，我也直接打印值：

<pre>{{mjaController.tempFiltering.fromDate}}</pre>
<pre>{{mjaController.tempFiltering.toDate}}</pre>

但是，ngModel 中的值是什么，或者我直接从 datepicker 中选择什么日期并不重要：datepicker 总是显示今天的日期 - 但是 ngModel 是更新到所选日期。

datepicker 可以作为标准 jQuery 正常工作，但是一旦我将它绑定到 AngularJS 指令，它似乎会破坏它。

请注意，我几乎完全从 here 复制了代码（跳过了 maxDate 和 dateRange 选项），但它不起作用，但在该示例中效果很好。

【问题讨论】：

标签： jquery angularjs jquery-ui datepicker

【解决方案1】：

我对角度知之甚少。无论如何，我对您发布的小提琴进行了一些更改，希望可以建议您解决问题的正确方法。希望这会有所帮助。

http://jsfiddle.net/xB6c2/1155/

var myApp = angular.module('myApp', []);
      
myApp.directive('myDatepickerfrom', function ($parse) {
    return function (scope, element, attrs, controller) {
        var ngModel = $parse(attrs.ngModel);
        $(function(){
            element.datepicker({
                showOn:"both",
                changeYear:true,
                changeMonth:true,
                dateFormat:'yy-mm-dd'}).on('change', function(d,i){
                	$('#dp2').datepicker("option","minDate",$('#dp1').val());
                  scope.$apply(function(scope){
                        ngModel.assign(scope,$('#dp1').val());
                    });
                 
                });
        });
    }
}).directive('myDatepickerto', function ($parse) {
    return function (scope, element, attrs, controller) {
        var ngModel = $parse(attrs.ngModel);
        $(function(){
            element.datepicker({
                showOn:"both",
                changeYear:true,
                changeMonth:true,
                dateFormat:'yy-mm-dd'}).on('change', function(){
                	$('#dp1').datepicker("option","maxDate",$('#dp2').val());
                  scope.$apply(function(scope){
                        ngModel.assign(scope,$('#dp2').val());
                    });
                });
        });
    }
});


function MyCtrl($scope) {

    $scope.userInfo = {
        person: {
            firstDate: '2017-11-10',
            lastDate: '2017-11-20'
        }
    };
    
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">

<input id="dp1" type="text" ng-model="userInfo.person.firstDate" name="firstDate" my-datepickerfrom/>

    <pre>{{userInfo.person.firstDate}}</pre>
    <hr />
    <input id="dp2" type="text" ng-model="userInfo.person.lastDate" name="lastDate" my-datepickerto/>

    <pre>{{userInfo.person.lastDate}}</pre>

</div>

【讨论】：