Lock certain dates and times

Ask the community
, ,
1

Is there a way to lock certain dates en times in a form when you add date and time from Wix.

I want something so users can pick a date and it shows different timeslots, when a timeslot and date expires I want it to become unclickable, it also has to be unclickable on the day itself.

So as an example: It’s January 7th 2021
When I click the calender I can choose the dates from January 8th 2021 to future. The dates before are unclickable.
When I click to select a time in a dropdown menu I can choose from 09:00 to 20:00.

I don’t want to use the bookingtool from Wix because it doesn’t connect to the database of the form I created.

2

Hi there Junior :raised_hand_with_fingers_splayed:

You can do that by setting the minDate property to the next day.

let now = new Date(); // Get today's date
now.setDate(now.getDate() + 1); // Get the next day

// Set the next day as the minimum day customers can select;
$w('#datePicker').minDate = now;

NOTE: If the current day was the last day of the month, you need to add the second month first, and if the month was the last one of the year, you need to add a year and select the first month, and the first day of that year. You need to check that with code.

This simply answers your question, that’s how you disable the current day and the last days from being selected.

Hope this helps~!
Happy Coding.
Ahmad

3

Hi Ahmed,

Thanks it worked! I’ve added it in my masterpage.js file and it works perfectly on all the pages my #datepicker is on.

Now is there also a way to only choose a time between 09:00 and 20:00 with the #timepicker ?

4

@info8724 You’re welcome :wink:

Unlike the datepicker, there’s no function to set the minimum or the maximum times, you can create a custom validation function instead, to reject the unwanted value.