[SOLVED] Forms: Date & Time Picker

Ask the community
, ,
1

Hello,

  1. Date picker: Is it possible to limit the date picker so a user cannot choose today’s date and can only choose a future date. i.e. Today is July 5th, but a user can only book July 6th onward.
  2. Time picker: Is it possible to limit the selectable time to working hours (8am-6pm)

Thank you

2

For date picker set ‘Show text on load’ to ‘Placeholder text’ or ‘Nothing’

Then run this function under your onReady function:

$w.onReady(function () {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth();
  var yyyy = today.getFullYear();
  let badDate1 = new Date(yyyy, mm, dd);
  $w("#datePicker1").disabledDates = [badDate1];
});

I’m not sure about TimePicker but I would just use a Dropdown and set the options to be between 8am to 6pm.

3

Thank you for your quick reply!
This does disable “today’s date” which is awesome!
However, I also need to block off weekends (Saturday and Sunday). This code seems to conflict with that. In the second image you will see Sunday is still selectable and it should not be.
Any ideas?

Thank you for your help!

1079×793 77.9 KB

4

Don’t insert an onReady function inside an onReady function.

This should only appear once on the page

$w.onReady(function () {
5

Thank you, will keep that in mind.

However, even with that removed Sunday is still selectable.

I have tried adding the following to block off Sunday, but the result is the same:
$w(“#datePicker1”).disabledDaysOfWeek = [5,6];

Any ideas?

Once again, thank you for your help!

1061×736 76.9 KB

6

[5, 6] means Friday and Saturday

7

Oops - you’re right!

Thank you for your help, Shan!

8

Use the code that Shan has supplied for you and simply adjust the disabled days of the week to be set correctly as he stated, you just need to change your code and it is shown correctly in Wix API reference.
https://www.wix.com/corvid/reference/$w.DatePicker.html#disabledDaysOfWeek

Set Sundays and Saturdays to be disabled

$w("#myDatePicker").disabledDaysOfWeek = [0, 6];

The disabledDaysOfWeek property accepts an array of integers from 0 to 6, where 0 represent Sunday, 1 is Monday, 2 is Tuesday, and so on.

Also, try your code first without using the set active days option in the datepicker itself to see if the code will does it all for you.