Okay, I think I’ve got a working version that meets all the criteria outlined in the conversation 
It was a little easier to refactor some of the code and use some of the native properties that the Date Picker supports.
Demo: https://noahlwix.wixstudio.com/date-ranges
I’ve simplified some of code to make it more robust. Here’s what changed:
1. Using Native Date Picker Properties
- Moved away from manual day-of-week validation in JavaScript
- Now uses the native
disabledDaysOfWeek property to disable Mon–Wed directly in the UI
- Users can’t even click on unavailable days, which is probably a better UX
2. Smart Date Selection
- The code now automatically finds the first available date starting from tomorrow
- If tomorrow isn’t a valid day (e.g., it’s a Monday), it will skip ahead to the next valid day (Thursday in this case)
- Example: If today is Sunday, tomorrow (Monday) is skipped, and Thursday is selected as the default instead
3. Removed Complexity
- Eliminated redundant validation logic
- Removed the unused
timeZone variable
- Cleaner date handling and formatting
4. Dynamic Time Slot Updates
- Added an
onChange listener to the date picker
- When users select a different date, the time dropdown automatically updates to reflect the correct hours for that day
- Thu/Sun: 5–8 PM | Fri/Sat: 5–9 PM
What Gets Disabled
| Day |
Available? |
| Monday |
 Disabled |
| Tuesday |
Disabled |
| Wednesday |
Disabled |
| Thursday |
 5–8 PM |
| Friday |
5–9 PM |
| Saturday |
5–9 PM |
| Sunday |
5–8 PM |
The minDate is always set to tomorrow, so today can never be selected even if it’s a valid day.
Docs used:
The code
$w.onReady(function () {
restrictDatePicker();
updateTimeDropdown();
// Update time dropdown when date picker changes
$w('#datePicker2').onChange(() => updateTimeDropdown());
});
function restrictDatePicker() {
const datePicker = $w('#datePicker2');
const validDays = [0, 4, 5, 6]; // Thursday (4), Friday (5), Saturday (6), Sunday (0)
// Set minDate to tomorrow
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
tomorrow.setHours(0, 0, 0, 0);
datePicker.minDate = tomorrow;
// Find the first available booking date (starting from tomorrow)
let firstAvailableDate = new Date(tomorrow);
while (!validDays.includes(firstAvailableDate.getDay())) {
firstAvailableDate.setDate(firstAvailableDate.getDate() + 1);
}
datePicker.value = firstAvailableDate;
// Disable Monday (1), Tuesday (2), Wednesday (3)
// Allow only Thursday (4), Friday (5), Saturday (6), Sunday (0)
datePicker.disabledDaysOfWeek = [1, 2, 3];
}
function updateTimeDropdown() {
const dropdown = $w('#timedropdown');
const selectedDate = $w('#datePicker2').value;
if (!selectedDate) {
dropdown.options = [{ label: 'Select a date first', value: '' }];
return;
}
const day = selectedDate.getDay(); // 0 = Sunday, 4 = Thursday, 5 = Friday, 6 = Saturday
const startHour = 17; // 5:00 PM
let endHour = day === 4 || day === 0 ? 20 : 21; // Thu/Sun: 8 PM, Fri/Sat: 9 PM
// Build time slots in 15-minute intervals
let options = [];
for (let hour = startHour; hour < endHour; hour++) {
for (let min = 0; min < 60; min += 15) {
const slotDate = new Date(selectedDate);
slotDate.setHours(hour, min, 0, 0);
options.push({
label: formatTime(slotDate),
value: slotDate.toISOString()
});
}
}
// Add final slot at endHour:00
const lastSlot = new Date(selectedDate);
lastSlot.setHours(endHour, 0, 0, 0);
options.push({
label: formatTime(lastSlot),
value: lastSlot.toISOString()
});
dropdown.options = options.length > 0 ? options : [{ label: 'No available slots', value: '' }];
if (options.length > 0) {
dropdown.value = options[0].value;
}
}
function formatTime(date) {
let hours = date.getHours();
let minutes = date.getMinutes();
let ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12; // Convert 0 to 12
let minutesStr = minutes < 10 ? '0' + minutes : minutes;
return `${hours}:${minutesStr} ${ampm}`;
}
