【问题标题】：Highlight specific date when datepicker shown显示日期选择器时突出显示特定日期
【发布时间】：2021-07-29 03:17:09
【问题描述】：

我有这个简单的日期选择器 jQuery，在我的应用程序中，我的用户可以回到过去，但不能回到未来。我想根据 url 浏览器中的日期参数显示当前日期。

我们说

var url_string = window.location.href;
var url        = new URL(url_string);
var dateParam  = url.searchParams.get("date"); <<----- current date

我有

$(".clock").click(function() {

    $( "#expiryDate" ).datepicker('setDate', date); <<---- Note here 

    $("#expiryDate").datepicker({
        dateFormat: 'yy-mm-dd',
        defaultDate: date,
        showAnim: "fold",
        gotoCurrent: true,
        maxDate: 0,
        onSelect: function() { 

            var dateSelected = $(this).datepicker('getDate'); 
            dateSelected = moment(dateSelected).format('YYYY-MM-DD');


            // $( "#expiryDate" ).datepicker('setDate', dateSelected);

            playSound('forward');

            if(dateParam == null) {
                var url = document.location.href+"&date="+dateSelected;
            }else {
                var url = document.location.href;
                url = url.replace(dateParam,dateSelected);

            }

            document.location = url;
        }
    });


    $('#expiryDate').datepicker('show');
});

即使今天是05/06/2021，用户也可以回到过去，看看那天发生了什么。所以当用户选择02/03/2021。我想强调那个日期02/03/2021。它似乎只有在我点击我的日期两次时才有效。

注意只有第二次点击3开始突出显示！

如何让它在第一次点击时突出显示？

【问题讨论】：

把这行$( "#expiryDate" ).datepicker('setDate', date);放在$('#expiryDate').datepicker('show');之前
之前不是已经了吗？ onClick后第一行就ok了
那一行应该在你初始化你的 datepicker 之后。
好的，让我试试，之后会分享结果。
您能加一个minimal reproducible example吗？我们几乎不可能调试代码。

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案1】：

我想突出显示 2021 年 2 月 3 日这一日期。它似乎只有在我点击我的日期两次时才有效。

如果删除以下代码：

var dateSelected = $(this).datepicker('getDate'); 
dateSelected = moment(dateSelected).format('YYYY-MM-DD');

这可以很容易地被onChange 函数参数替换，有关更多信息，请查看documentation。

替换为：

onSelect: function(dateSelected) {

考虑到这一点，我从上面的代码中创建了某种 [mre]。这似乎按预期工作：

url_string 日期在加载时选择
按下后，新日期会立即突出显示

var url_string = 'https://example.com?date=2021-05-02';    // DEBUG
var url        = new URL(url_string);
var dateParam  = url.searchParams.get("date");
console.log('dateParam', dateParam);

$(".clock").click(function() {

    $("#expiryDate").datepicker({
        dateFormat: 'yy-mm-dd',
        defaultDate: dateParam,
        showAnim: "fold",
        gotoCurrent: true,
        maxDate: 0,
        onSelect: function(dateSelected) { 
            console.log('onSelect', dateSelected);

            if (dateParam == null) {
                var url = document.location.href+"&date="+dateSelected;
            } else {
                var url = document.location.href;
                url = url.replace(dateParam,dateSelected);
            }
        }
    });

    $('#expiryDate').datepicker('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class='clock'>?
  <div id='expiryDate' />
</div>

【讨论】：

【解决方案2】：

暂时在黑暗中拍摄，因为我们的信息很少：

根据你的sn-ps：

var dateParam  = url.searchParams.get("date"); <<----- current date

和

$( "#expiryDate" ).datepicker('setDate', date); <<---- Note here

问题是您在使用date 时定义了dateParam。

很难判断其他代码是否定义了 date 变量，但首先，我会确保您的日期设置正确...

console.log(date); // Make sure it logs the correct date.
$( "#expiryDate" ).datepicker('setDate', date); <<---- Note here

【讨论】：

【解决方案3】：

这是由于日期选择器的生命周期。日期选择器将被初始化为

$("#expiryDate").datepicker({});

如果你打电话

$("#expiryDate").datepicker('setDate', date);

在日期选择器初始化之前，第一次与它无关。第二次，因为datepicker被初始化了。所以，一切正常。而且，一旦你设置了日期，就不需要默认日期了。

由于以上原因，代码应修改为

$(".clock").click(function() {
    $("#expiryDate").datepicker({
        dateFormat: 'yy-mm-dd',
        showAnim: "fold",
        gotoCurrent: true,
        maxDate: 0,
        onSelect: function() { 

            var dateSelected = $(this).datepicker('getDate'); 
            dateSelected = moment(dateSelected).format('YYYY-MM-DD');


            // $( "#expiryDate" ).datepicker('setDate', dateSelected);

            playSound('forward');

            if(dateParam == null) {
                var url = document.location.href+"&date="+dateSelected;
            }else {
                var url = document.location.href;
                url = url.replace(dateParam,dateSelected);

            }

            document.location = url;
        }
    });

    $("#expiryDate").datepicker('setDate', date); <<---- Note here 
    $("#expiryDate").datepicker('show');
});

【讨论】：