Highlight specific date when datepicker shown

Question

I have this simple datepicker jQuery, and in my application my users can go back to the past, but not future. I want to show the current day base on the date param in the url browser.

Let's say

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

I have

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

Even if today is 05/06/2021, users can go back to the past, and see what happened on that day. So when user selected 02/03/2021. I want to highlight that date 02/03/2021. It seems working only if I clicked on my date twice.

Notice only second clicked 3 started to highlight!

How do I make it highlight on first clicked ?

Answer 1

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

---

If removed the following code:

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

This can easily be replaces by the onChange function parameter, for more info, take a look at the documentation.

Replaced by:

onSelect: function(dateSelected) { 

---

With that in mind, I've created some sort of [mre] from the code above. This seems to work as expected:

1. The url_string date is selected on load
2. On press, the new date is highlighted instantly

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>