enabledDateRanges

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

Description

Setting the enabledDateRanges property lets site visitors select dates in the specified ranges, provided that the dates aren't disabled by some other property.

Note: All dates outside the set ranges are disabled.

Set enabledDateRanges to:

An array of date ranges to enable, each with a start date and an end date.
An empty array ([]), to disable all dates.
Null, to ignore enabledDateRanges. Use this to ignore previously set enabled date ranges.

Getting the enabledDateRanges property returns the current list of enabled date ranges.

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

Disabled dates override any dates enabled with the enabledDateRanges property. This includes dates disabled with the Wix Editor and with the following properties:

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.

Was this helpful?

Get ranges of dates that are enabled

Copy Code

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

Set ranges of dates that are enabled

Copy Code

1const monthsOnCall = [
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$w('#myDatePicker').enabledDateRanges = monthsOnCall;

Set ranges of enabled dates based on a specific time zone

This example demonstrates how to set a timezone when specifying enabled date ranges. The example also takes 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 enabledDates = [
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').enabledDateRanges = enabledDates;

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