DatePicker default to current date when page is refreshed

Ask the community
,
1

I am haveing an issue with a datepicker on my site. I am rendering the date ranges for the datepicker by passing it as a value in session storage. When the page initially loads everything works as it should; however on page refresh the datepicker will ALWAYS be set to the current date.

I have confirmed that the value is still in session storage and confirmed that the same code block that renders the datepicker on initial page load is running successfully.

Here is the code block that sets the date picker

let dateRanges = resort.availability.map( date => {
        return {startDate: new Date(date.startDate), endDate: new Date(date.endDate)}
    })
    $w("#checkInDate").enabledDateRanges = dateRanges
    if(values.choosenDate) {
        let checkInDate = new Date(values.choosenDate)
        $w("#checkInDate").value = checkInDate
        checkIn = (checkInDate.toISOString().split("T")[0])
        let copy = checkInDate
        let checkout = new Date(copy.setDate(copy.getDate() + Number(values.duration)))
        checkOut = (checkout.toISOString().split("T")[0])
    } else {
        console.log("Crazy Console Log")
        let checkInDate = new Date(resort.availability[0].startDate)
        $w("#checkInDate").value = checkInDate
        checkIn = (checkInDate.toISOString().split("T")[0])
        let copy = checkInDate
        let checkout = new Date(copy.setDate(copy.getDate() + Number(values.duration)))
        checkOut = (checkout.toISOString().split("T")[0])
    }

on page refresh resort.availability shows the date ranges that I want to pass through to the datepicker.
-IMPORTANT NOTE: These values are passed to the datepicker successfully. When I click on it I can see the correct enabled date ranges.

I am not sure if this is an issue with the way the component is mounting on page refresh, but I can’t imagine it would mount any differently than it did when navigating to it

2

The snippet you posted is not enough, as I guess the problem is in another part of your code.

3

Both when the page loads and when it is refreshed resort.availability pulls up the following array:



[
    {
        "startDate": "2022-11-11T08:00:00.000Z",
        "endDate": "2022-11-11T08:00:00.000Z"
    },
    {
        "startDate": "2022-11-25T08:00:00.000Z",
        "endDate": "2022-11-25T08:00:00.000Z"
    }
]

Other than the above snippit and this array nothing else is modifying or changing the value of the dropdown.

4

Yet, you should post the entire code, so I’ll be able to see logics and maybe locate the problem.
P.S. I suggest that when you store the selection with session.setItem, do not do all this toISOString conversion.
Instead store the entire array as JSON which converts it into ISO format automatically.
Like:

dateRange = [
    {
        startDate: dateObject1,//this is a Date object or the value you get from a dropdown it doesn't matter
        endDate: dateObject2
    },
    {
        startDate: dateObject3,
        endDate: dateObject4
    }
];
sesession.setItem('dateRange', JSON.stringify(dateRange);

And when you retrieve the session date.

const storedDateRange = session.getItem('dateRange');
if(storedDateRange){
let dateRange = JSON.parse(storedDateRange)
.map(e => ({startDate : new Date(e.startDate), endDate: new Date(e.endDate)}));
//now bind the data to the date picker.
}
5

I am doing pretty much the same thing. Just mapping on a different line. I also have to call the toISOString method manually when assigning the date value to the datepicker. For some reason, even though I am creating a date object for resort.availability[0].startDate when I try to assign that same date object to the $w(“#checkInDate”) without creating a new Date it does not work. Setting it to a new date without converting and splitting the string to remove the time part sometimes sets the value to the previous day. This is because when I am mapping and creating dates from the availability array originally the time stamp shows midnight. Any change in time zone between the server and the client will cause the new date to be created with the previous day.

I am saving as ISO strings for checkIn and checkOut dates because I am passing them to an API that expects them in that format without the time.

Regarding the rest of my code. Do you want me to post the entire page code? If so it is 313 lines.

6

I will try it. Thanks for the information. Are you searching for an essay writing service to help you finish your university assignment? Therefore, you can use the link at https://www.topessaywriting.org/samples/cell-phones to your advantage. The best article for writing a college paper is this one. They take care of the students’ academic assignments and help the students overcome challenges.

7

Hey everyone! I’m facing an issue with a datepicker on my website. Initially, everything works fine, but when I refresh the page, the datepicker always resets to the current date, even though the value is still stored in session storage. I’ve checked that the code block responsible for rendering the datepicker runs successfully on page load. The values for date ranges are passed correctly to the datepicker, and I can see the correct enabled date ranges when I click on it. I’m not sure if this problem is related to how the component mounts on page refresh. Any suggestions would be greatly appreciated! Thanks in advance for your help. By the way, great to see everyone here! (except spammers) :wink: