Tuesday, 1 June 2021

Highlight specific date when datepicker shown

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 ?



from Highlight specific date when datepicker shown

No comments:

Post a Comment