JQuery UI datepicker突出显示不是选定日期的特定日期答案

【问题标题】：JQuery UI datepicker highlight specific date that isn't a selected dateJQuery UI datepicker突出显示不是选定日期的特定日期
【发布时间】：2016-01-27 00:48:27
【问题描述】：

我有 2 个日期选择器。一是入住日期。另一个是结帐日期。我使用 Jquery 是因为我以不同的方式将它用于移动设备，否则我将使用引导程序日期选择器，因为它已经提供了此功能，我不必自己编写代码。

我在做什么：我将它与 AngularJS 一起使用，并且我在指令中初始化了 datepicker。选择签入字段后，结帐字段将打开，因此用户可以选择结帐日期。 minDate（或签入日期）td 一直到结帐日期 td 都被突出显示，因此它看起来像一个日期范围选择器，而不是真正的日期范围选择器。这使用户能够更改其中一个日期而不必更改另一个。如果那有意义的话。如果没有，我可以详细说明。

问题/问题：这可能是也可能不是愚蠢的问题，但是如何让结帐日期显示在签入日期选择器上？不使用日期范围选择器？本质上，我需要将一个类定位或添加到 datepicker 上不是 minDate 或 maxDate 且尚未被选中的日期。

这可以用 beforeShowDay 完成吗？

提前感谢您的帮助。

【问题讨论】：

看看这篇文章，它可能会让你朝着正确的方向前进。 stackoverflow.com/questions/1452066/…
我试过你的链接，它很有帮助，但是 beforeShowDay 在我需要的时候没有运行。它仅在添加日期并且当时尚未选择结帐日期时运行。
还有几个插件可以选择多个日期。我在想你可以使用其中一个并将允许的最大日期设置为 2。
我想我找到了办法。它可能不是最好的选择，但它确实有效。我刚刚使用了 beforeShowDay 并在退房日期设置了手表。选择退房日期后，它会重新启动签入日期选择器

标签： javascript jquery datepicker

【解决方案1】：

感谢@Bindrid 为我指明了正确的方向。对于那些可能想看看我做了什么的人，给你。

内部角度指令：

       function showCheckout () {
            var coFormated = new Date(scope.co);
            if (date.getTime() === coFormated.getTime()) {
                console.log(date);
                console.log(coFormated);
                return [true, "ui-state-highlight"];
            } else {
                return [true, '', ''];
            }
        }
        function startDatepicker () {
            element.datepicker({
                minDate: 0,
                numberOfMonths: numMonths,
                showOtherMonths: true,
                gotoCurrent: true,
                beforeShowDay: function(date) {
                    var coFormated = new Date(scope.co);
                    if (date.getTime() === coFormated.getTime()) {
                        return [true, "highlight_end"];
                    } else {
                        return [true, '', ''];
                    }
                },
                onSelect: function (date) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(new Date(date));
                    });
                }
            });
        }
        scope.$watch('co', (function (newValue) {
            startDatepicker();
            if (scope.ci) {
                $('.ci').datepicker("setDate", scope.ci );
            }
        }), true);

【讨论】：