突出显示日期选择器打开时的特定日期

Question

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

举个例子：

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');
});

即使今天是2021年5月6日，用户也可以回到过去，查看那一天发生了什么。所以当用户选择了2021年2月3日时，我想突出显示那个日期2021年2月3日。只有在我两次点击我的日期时才有效。

请注意，只有第二次点击“3”才开始突出显示！

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

- code-8

---

在 $('#expiryDate').datepicker('show'); 之前加入这行代码 $( "#expiryDate" ).datepicker('setDate', date);。 - Swati

这不是之前就已经了吗？第一行在onClick后面没问题。 - code-8

那行代码应该在你初始化日期选择器之后。 - Swati

好的，让我试一下，完成后会分享结果。 - code-8

请您能否添加一个 [mre]？这样我们就可以更方便地调试代码了。 - 0stone0

Answer 1

我想强调的是日期02/03/2021。只有在我双击日期时，它才有效。

---

如果删除以下代码：

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

这可以轻松地通过onChange函数参数进行替换，更多信息请查看文档。

替换为：

onSelect: function(dateSelected) { 

---

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

1. url_string日期在加载时被选中
2. 按下后，新日期立即突出显示

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>

- 0stone0

Answer 2

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

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

如果你调用

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

在日期选择器初始化之前，一开始它将没有任何作用。

第二次使用时，由于日期选择器已经被初始化了，所以一切都能正常工作。此外，一旦设置了日期，就不需要默认日期了。

基于以上原因，代码应该做相应修改。

$(".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');
});

- Epic Chen

Answer 3

现在我们还没有足够的信息，所以有点盲目猜测：

根据你提供的片段：

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

而且

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

问题在于你定义了dateParam，却使用了date。

很难确定其他代码是否定义了date变量，但作为一个入门者，我会确保你的日期设置正确...

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

- Salketer