Set Date Picker to a Specified Value

Discussion Ask a question
,
1

Hi,

I really hope someone can help me as I am at a total loss with what to do next.

I have been searching for days at previous posts and have seen the same question a few times but no definitive answers to it as yet.

In my site I have 2 date pickers. One for a Departure Date, the other for the Return Date.
I am trying to find a way to make my Return Date’s initial value (the displayed one) be equal to whatever the Departure Date value has been selected PLUS 2 days . I would also like to disable all dates previous to this on the calendar so they cannot select an older return date.

So for example; if someone selected 15 August 2021 as the Departure Date, I would like the Return Date box to initially display 17 August 2021, then when the person goes to pick a return date, the calendar will disable them from picking anything before 17th August.

I can attach the code I have already tried if needed, I just did not want to confuse matters and I thought explaining it in plain english with examples might be the clearest way.

Thanks in advance!

2

@cmccluskey958 There are always several ways to do these things, but I found that converting the first date to a time value using the JS getTime function, adding two days to that time value, then using the date function on that is an effective way to do it.

export function datePicker1_change(event) {
     let firstTime = event.target.value.getTime();
     //86400000 milliseconds in a day
     let timeTwoDaysHence = firstTime + (2 * 86400000);
     let dateTwoDaysHence = new Date(timeTwoDaysHence);
     $w('#datePicker2').value = dateTwoDaysHence;
     $w('#datePicker2').minDate = dateTwoDaysHence;
}
3

I cannot thank you enough @anthonyb !! This worked first time and is exactly what I wanted! Never would have thought of converting it to milliseconds but that makes so much sense now. Thank you again!

4

@cmccluskey958 You’re welcome. I’m glad you can move onto the next challenge.