javascript - 显示日期选择器时突出显示特定日期

Question

我有这个简单的 datepicker jQuery，在我的应用程序中，我的用户可以回到过去，但不能回到 future 。我想根据 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开始突出!

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

Answer 1

I want to highlight that date 02/03/2021. It seems working only if I clicked on my date twice.

如果删除以下代码:

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>