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

Posted 2023-05-09

【中文标题】即使从中选择另一个日期，JQueryUI DatePicker 也始终将今天的日期显示为选中状态

【英文标题】：JQueryUI DatePicker always displays todays date as selected even when selecting another date from it

【发布时间】：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 选项），但它不起作用，但在该示例中效果很好。

【参考方案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>