disabledDateRanges

Sets or gets ranges of dates that a site visitor can't select.

Description

Setting the disabledDateRanges property prevents site visitors from selecting dates in the specified ranges.

Set disabledDateRanges to:

An array of date ranges to disable, each with a start date and an end date
An empty array ([]), to remove the current disabled dates

Getting the disabledDateRanges property returns the current list of disabled date ranges.

Ranges are inclusive. This means that January 10th and February 10th are disabled when specifying a range from January 10, 2025 to February 10, 2025.

Disabled dates override any dates enabled with the enabledDateRanges property. This means that if a date matches both enabled and disabled properties, the site visitor can't select the date in the date picker.

Type:

Array<DateRange>Read & Write

NAME

TYPE

DESCRIPTION

startDate

Date

Start date for the range. The startDate is inclusive, meaning it's included in the range. The start date must be earlier than or the same as the end date of the range.

endDate

Date

End date for the range. The endDate is inclusive, meaning it's included in the range. The end date must be later than or the same as the start date of the range.

Related Content:

disabledDaysOfWeek, enabledDateRanges

Was this helpful?

Get ranges of dates that are disabled

Copy Code

1let disabledDates = $w('#myDatePicker').disabledDateRanges;
2
3let firstDisabledStartDateAsString = disabledDates[0].startDate.toDateString(); // 'Sat Dec 25 2022'

Set ranges of dates that are disabled

Copy Code

1const holidays2022 = [
2  {
3    startDate: new Date('4/15/2022'),
4    endDate: new Date('4/17/2022')
5  },
6  {
7    startDate: new Date('12/25/2022'),
8    endDate: new Date('01/01/2023')
9  }
10];
11$w('#myDatePicker').disabledDateRanges = holidays2022;

Set ranges of disabled dates based on a specific time zone

This example demonstrates how to base the disabled date ranges on the time zone for a specific country, such as New Zealand, and to take daylight savings into account (GMT+13 instead of GMT+12).

Copy Code

1$w('#myDatePicker').timeZone = 'Pacific/Auckland';
2
3// In 2022, New Zealand switches to daylight savings 
4// time on September 25th
5
6const disabledDates = [
7  {
8    startDate: new Date('06/10/2022 GMT+12'),
9    endDate: new Date('08/15/2022 GMT+12')
10  },
11  {
12    startDate: new Date('08/01/2022 GMT+12'),
13    endDate: new Date('10/01/2022 GMT+13')
14  }
15];
16
17$w('#myDatePicker').disabledDateRanges = disabledDates;

Disable weekends and holidays that occur during date ranges that are enabled

This example demonstrates how to:

Enable certain months in the date picker, such as for an "on call" roster for a team
Disable holidays
Disable weekends

Copy Code

1const roster = [
2  {
3    startDate: new Date('1/1/2022'),
4    endDate: new Date('1/31/2022')
5  },
6  {
7    startDate: new Date('4/01/2022'),
8    endDate: new Date('4/30/2022')
9  },
10  {
11    startDate: new Date('7/01/2022'),
12    endDate: new Date('7/31/2022')
13  },
14  {
15    startDate: new Date('10/01/2022'),
16    endDate: new Date('10/31/2022')
17  }
18];
19
20const holidays2022 = [
21  {
22    startDate: new Date('4/15/2022'),
23    endDate: new Date('4/17/2022')
24  },
25  {
26    startDate: new Date('12/25/2022'),
27    endDate: new Date('01/01/2023')
28  }
29];
30
31$w('#myDatePicker').enabledDateRanges = roster;        // Available on 1st month of each quarter   
32$w('#myDatePicker').disabledDateRanges = holidays2022; // Not available on holidays
33$w('#myDatePicker').disabledDaysOfWeek = [0, 6];       // Not available on weekends