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>

Shooting a bit in the dark for now, since we have low info:

According to your snippets:

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

And

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

The problem is that you define dateParam while you use date.

It's hard to tell if other code define the date variable, but as a starter, I'd make sure that your date is correctly set...

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

It is due to the lifecycle of the datepicker. The datepicker will be initialized as

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

If you call

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

Before the datepicker be initialized, that will nothing to do with it at the first time. At the second time, because of the datepicker was initialized. So, everything works fine. Moreover, once you set the date, it not needs to default date.

Due to reasons of above, the code should be modified as

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