Date picker min 3 days away

Ask the community
,
1

What would the exact code look like to force a user to select only a date that is 3 days away from today’s date and what steps would I have to take to make sure the code applies to that form element.

I already read through the $w data picker reference and saw this code but don’t know what goes before or after it and how to make sure it applies to that specific date picker element on the form.

let pickerMinDate = $w(“#myDatePicker”).minDate;
let minStr = pickerMinDate.toDateString(); // “Fri Jan 13 2017”

2

IT, Andreas posted some date routines here on this forum a month or so ago. Search for his posts on dates. It´ll give you a clue. Also, all JS date manipulations will work inside Wix Code, have a look at w3schools.com and search for Date data type.

3

Hey there IT,

This function will give you today’s date adjusted by the the number of days:

function addDays(days) {
  var date = new Date();   // today
  date.setDate(date.getDate() + days);
  return date;
}

Then set the min and max dates:

	$w("#myDatePicker").minDate = addDays(-3);
	$w("#myDatePicker").maxDate = addDays(3);

This will limit the possibilities for the DatePicker.

Good luck,

Yisrael

4

I copied and pasted your exact code into my Page Code and added by date picker name and it did not work.

function addDays(days) {
var date = new Date(); // today
date.setDate(date.getDate() + days);
return date;
}

$w(“#datePicker1”).minDate = addDays(-3);
$w(“#datePicker1”).maxDate = addDays(3);

5

Hi IC,

You don’t say what doesn’t work, but let me give it a stab…

I tried this out and lo and behold, it doesn’t work. Or at least, half of it doesn’t work. The maxDate works, but the minDate doesn’t. How? Well, no past dates are displayed, even if I don’t bother setting the minDate property.

Looking at the Date Picker Settings box, I discovered that the Show past dates setting was disabled. Like this:


Make sure that all of the datepicker settings are enabled according to your requirements. For example:

321×562 19.4 KB

In the above settings I have enabled past and future dates, and have set all days of the week as active.

So, did I guess right? I hope this helps.

Yisrael

6

Hi,
I’ve tried this code but it doesnt work. Not sure I understood it correctly.
I want the users can select the delivery date which is available min 3 days from the day they order (means today).

  1. What code should I use?
  2. I created a dynamic page and input the calendar from User Input. Is it the only way to do it?
  3. How can I connect this calendar dynamic page to the cart page?

Thank you
Quynh-Anh

7

Y’s code worked for me. I just had to make sure all setting toggles (allow past dates and future dates) was on. This was the code I used. I changed the -3 to +3 because I wanted to restrict close in bookings - earliest is 3 days from now.

Also, make sure you create an onClick event for your date picker in the properties panel.

function addDays(days) {
var date = new Date(); // today
date.setDate(date.getDate() + days);
return date;
}
export function datePicker1_click(event) {
$w(“#datePicker1”).minDate = addDays(+3);
}

8

I want to make a code allowing teachers to add a lesson for students to check , but only can stay alive for students 3 weeks, then it should be deleted. how can I make it? with data picker?
thank you