Date Picker Timing Issue?

[silleekim]

I have some code that works in Preview mode but not on my published site.

I have two date picker elements on my page, called #dateStart and #dateEnd to allow the user to specify the range of dates for an action. By default, they are preloaded with today’s date.

I have an onReady function on my page. It includes the following:

    let yr = new Date().getUTCFullYear();
    let mon = new Date().getMonth();
    $w('#dateStart').value = new Date(yr, mon - 1, 1);
    $w('#dateEnd').value = new Date(yr, mon, 1);

The idea is that the default start and end date are set to the first of the previous month and the first of the current month.

When the page is loaded, the default dates are displayed correctly, both in preview mode and on my published site.

I have a JS function on my page that uses $w(‘#dateStart’).value and $w(‘#dateEnd’).value.

When in preview mode, it always works as expected.

On my published site, when I reference those two date elements I get the current date, not the date that was set in my onReady function. But, if I manually set the dates, my function works correctly with the entered dates.

I suspect this is some kind of race condition that has to do with when the page is loaded, when the elements are loaded, when the onReady is called, etc. But I don’t really have a good idea how to work around this. Any thoughts?

[CODE-NINJA]

You are using → a DATASET ?

Remember…

$w.onReady(()=>{
    $w('#dataset').onReady(()=>{
          **....now you can start coding.....**
    });
});

[silleekim]

No, I’m not using a dataset.

[CODE-NINJA]

Show full code.

You are talking about → $w.onReady() → but it is not inside your provided code.
Anyone knows what else is inside your written code, or which errors can be found else.

[silleekim]

This is my full onReady code.

$w.onReady(function () {
    // Set the action to be taken when the button is clicked
    $w('#partnerPassReportButton').onClick(() => loadBookings());

    // Initialize the form with the default start and end date.
    // Note that by default (if the user doesn't everride these)
    //    this page will report on all booking data for the previous month.
    // Note that the reporting is NOT inclusive of the end date.
    let yr = new Date().getUTCFullYear();
    let mon = new Date().getMonth();
    $w('#dateStart').value = new Date(yr, mon - 1, 1);
    $w('#dateEnd').value = new Date(yr, mon, 1);

    // The status text on this page is used to keep the user informed about progress
    $w('#statusText').text = "Ready!";
    $w('#statusText').show();

    // The error text is used, of course, to report errors to the user.
    $w('#errorText').hide();
})

[CODE-NINJA]

Inside Wix-Editor-Console…

On published Website…

Running code…

$w.onReady(function () {
    let year = new Date().getUTCFullYear(); 		console.log("Year: ", year);
    let month = new Date().getMonth();				console.log("Month: ", month);
	//----------------------------------------------------------------------------------------
	let dateStart = new Date(year, month - 1, 1); 	console.log("START-DATE: ", dateStart);
	let dateEnd = new Date(year, month, 1); 		console.log("END-DATE: ", dateEnd);
})

[silleekim]

You are exactly correct that the onReady function seems to operate correctly. However, my problem is what happens in the loadBookings function. You see from my onReady code above that loadBookings is set to be the onClick function for a button on my page. That means that this function doesn’t execute until the user clicks my button, long after the onReady function runs.

To illustrate the problem, I added code at the top of load Bookings to display the two date fields that had been set by the onReady function:

async function loadBookings() {

    $w('#errorText').show() ;
    $w('#errorText').text = "Start Date: " + $w('#dateStart').value.toLocaleDateString();
    $w('#errorText').text += ", End Date: " + $w('#dateEnd').value.toLocaleDateString();

// All the rest of my code

I then saved and published my site. When I ran my page in Preview Mode and clicked on the button, I get the following:

You can see that the two date pickers have the correct value, the ones set in onReady. You can see the text I displayed correctly shows those two values.

Then, I went to my live site and ran my page (which happens to be a Dashboard Page). After I clicked on my button, I got the following:

You can see that my date pickers have the correct values I initialized. However, the dates shown in my display text is today’s date, not the date I set in onReady.

I also found that if I set either date manually before clicking the button to something other than the value I initialized it to, the code will then work correctly.

I suspect you can easily reproduce this problem by creating a page with two date pickers (maybe just one), a button, and a text field, using onReady to set the two dates and the onClick function of the button, and in the onClick function setting the text field to the value of the date picker(s).

[silleekim]

I have indeed duplicated the problem on a simple page with just three elements on a simple site. This is the full code for my page:

$w.onReady(function () {
    $w('#button1').onClick(() => displayDate());
    let year = new Date().getUTCFullYear();
    let month = new Date().getMonth();
    $w('#datePicker1').value = new Date(year, month - 1, 1);
    $w('#text23').text = "";
    $w('#text23').show();

});

function displayDate() {
	$w('#text23').text = $w('#datePicker1').value.toLocaleDateString();
}

I published my site. When I ran in Preview mode, clicking the button correctly displayed the date as the first of last month. When I ran in Live mode, it incorrectly displayed today’s date.

[CODE-NINJA]

Running your code… on PREVIEW-MODE—>RESULT—>

Running your code… on LIVE-SITE—>RESULT—>

Just by clicking onto the button → same results.

Using ordinary Wix-Editor.

[silleekim]

Ok, you and I get different results running the same code. I wonder what the difference is.

[CODE-NINJA]

Your EDITOR maybe?
Which editor do you use ?

Or tried another DATE-PICKER ?

But seems like you are also using the ordinary Wix-Editor.

[CODE-NINJA]

But wait!!!

—> what’s that?

I think i misunderstood. I was testing it on a normal page.
You are working with the Wix-Bookings-Wix-App

Regarding the fact, that you have some backendstuff → this changes the situation.

I would have to take a look directly onto the issue, to get it resolved sorry.

[silleekim]

I’m using the regular Wix Editor. I just picked the first date picker that the Editor listed. I guess I could try another one. I’m not sure why there would be a difference.

Also, although my full code uses backend functions, the simple code I used to reproduce the problem didn’t. The only difference from your code is that I ran it as a Dashboard Page. Could that be the difference? I definitely need my code to run as a Dashboard Page.

Thanks for your help.

[silleekim]

I changed my test code so that it includes one of each of the types of date pickers offered by the Wix Editor. All of them had the same problem except the fifth one, the one that says “SELECT A DATE” at the top. It looks to me like most of the date picker elements have a timing problem, where they are not fully loaded when the onReady function is called. I’m going to try to change my full page to use this Select a Date picker and see if my problem goes away.

My test code:

$w.onReady(function () {
    let year = new Date().getUTCFullYear();
    let month = new Date().getMonth();
    $w('#datePicker1').value = new Date(year, month - 1, 1);
    $w('#datePicker2').value = new Date(year, month - 1, 2);
    $w('#datePicker3').value = new Date(year, month - 1, 3);
    $w('#datePicker4').value = new Date(year, month - 1, 4);
    $w('#datePicker5').value = new Date(year, month - 1, 5);
    $w('#datePicker6').value = new Date(year, month - 1, 6);
    $w('#text23').text = "";
    $w('#text23').show();
    $w('#button1').onClick(() => displayDate());

});

function displayDate() {
	$w('#text23').text = $w('#datePicker1').value.toLocaleDateString();
	$w('#text23').text += " " + $w('#datePicker2').value.toLocaleDateString();
	$w('#text23').text += " " + $w('#datePicker3').value.toLocaleDateString();
	$w('#text23').text += " " + $w('#datePicker4').value.toLocaleDateString();
	$w('#text23').text += " " + $w('#datePicker5').value.toLocaleDateString();
	$w('#text23').text += " " + $w('#datePicker6').value.toLocaleDateString();
}

What I see after loading this page in Live mode and clicking on the button:

[silleekim]

I found this:

Issue setting date picker value

Someone else had this same problem and worked around it by adding a one second delay in the onReady function before setting the Date Picker value.

The obvious conclusion is that the Date Picker element is not fully loaded by the time the onReady function runs. Sounds like a bug to me, but at least I have a workaround.