Please Help: Disabling Date Ranges

Ask the community
, ,
1

I’m still learning, and I think I’ve done my due diligence trying to find a solution to this by searching…

So here’s what we’ve been doing the past several months… And to add some context - We use a date picker field for customers to choose a ‘ready by’ date. As we book up, we manually add the dates to disable so they can’t be selected.

This has been working fine, but… We’ve been booking well ahead lately and it gets to be a lot of badDate variables to manage. I thought it might be easier if there was a way to use date ranges instead of individual dates.

For example, we’re fully booked for April (so, my code sample below is stripped down to keep it brief), but I have close to 30 “let badDate = …” lines.

So, I’m wondering if there’s something I’m missing that would make it possible to define date RANGES (and combine with individual dates, since they can be scattered at times).

Something like (obviously a mock sample):

let badDate8 = new DateRange(2022, 3, 12 : 2022, 3, 30);

Here’s the ‘condensed’ version of what we’ve been doing:

$w.onReady(function () {

// ALWAYS BLOCK TODAY + NEXT 6 DAYS
var today = new Date();
var dd1 = today.getDate();
var dd2 = today.getDate() + 1;
var dd3 = today.getDate() + 2;
var dd4 = today.getDate() + 3;
var dd5 = today.getDate() + 4;
var dd6 = today.getDate() + 5;
var dd7 = today.getDate() + 6;

var mm = today.getMonth();
var yyyy = today.getFullYear();

let badDate1 = new Date(yyyy, mm, dd1);
let badDate2 = new Date(yyyy, mm, dd2);
let badDate3 = new Date(yyyy, mm, dd3);
let badDate4 = new Date(yyyy, mm, dd4);
let badDate5 = new Date(yyyy, mm, dd5);
let badDate6 = new Date(yyyy, mm, dd6);
let badDate7 = new Date(yyyy, mm, dd7);

// MANUAL DATES - BOOKED
let badDate8 = new Date(2022, 3, 12);
let badDate9 = new Date(2022, 3, 13);
.... And so on (this is where it gets lengthy)

// DISABLE THE DATES
$w("#datePicker2").disabledDates = [badDate1,badDate2,badDate3,badDate4,badDate5,badDate6,badDate7,badDate8,badDate9, ... And so on...];
});

Thanks in advance if anyone can offer any advice that might help make this more manageable!

2

It looks like disabledDates is deprecated, and there is a new function that does exact the thing you want

https://www.wix.com/velo/reference/$w/datepicker/disableddateranges

So instead of

let badDate8 = new DateRange ( 2022 , 3 , 12 : 2022 , 3 , 30 );

It would be

let badDate8 = [
{
startDate: new Date('03/12/2022'),
endDate: new Date('03/30/2022')
}
]

$w("#datePicker2").disabledDateRanges = badDate8;
3

Thanks for the quick response, Simen!

I assume with this logic, it’s possible to include individual dates as well? Like this:

let badDate8 = [
{
startDate: new Date('03/12/2022'),
endDate: new Date('03/30/2022')
}
]

let badDate9 = new Date(2022,3,13);

$w("#datePicker2").disabledDateRanges = badDate8;
$w("#datePicker2").disabledDates = [badDate1,badDate2,badDate3,badDate4,badDate5,badDate6,badDate7,badDate9,... And so on...];
4

I had to change it to

let badDate9 = new Date ( ‘2022,3,13’ );

(’ ’ around the date)

But other than that, it looks like you can combine the two just fine. And if you have more than one range of disabled dates you go

let badDate8 =
[
{
//disables 12th of March to 30th of March
startDate : new Date ( ‘03/12/2022’ ), endDate : new Date ( ‘03/30/2022’ )
},
{
//Disables from today to 30th of April
startDate : new Date (), endDate : new Date ( ‘04/30/2022’ )
}
]

5

Awesome! Thanks again! I’ll give this a go, and if it works as I assume it should, this should really help clean things up.

Cheers!

6

You can greatly simplify this code. If you want to block the next six days you could use the following:

let startDate = new Date()
let endDate = new Date(startDate.setDate(startDate.getDate() + 6))

$w("#yourDatePickerHere").disabledDateRanges = [{startDate, endDate}]

you can also replace the 6 with a variable in case you want to dynamically disable dates in the future.

Finally you can break this down into a standalone function and just return the object containing startDate and endDate in case you wanted to have gaps in your disabled dates (I.E. disable the first - sixth of every month for a year)

7

an implementation of the function would look something like this

export function disableDates(startDate, numOfDays) {
	let endDate = new Date(startDate.setDate(startDate.getDate()+ numOfDays))

	return {startDate, endDate}
}

You can then call this any number of times and push the response onto an array of restrictedDays.

8

This is all very helpful! Thank you so much!