Datepicker javascript禁用选项，如果== 6天

Question

请帮助，如何禁用选项：

<option value="17-19">17-19</option>
<option value="19-22">19-22</option>

如果用户选择星期六我使用日期选择器

<select placeholder="hour">
        <option selected disabled value="">select hour</option>
        <option value="7-9">7-9</option>
        <option value="9-11">9-11</option>
        <option value="11-13">11-13</option>
        <option value="13-15">13-15</option>
        <option value="15-17">15-17</option>
        <option value="17-19">17-19</option>
        <option value="19-22">19-22</option>
    </select>

<input id="datepicker" class="datepiker" autocomplete="off" type="text"  min="<?php echo date("Y-m-d"); ?>" placeholder="select date" required></div>

Answer 1

如果你想自己做这件事，你可以在你的输入元素上使用EventListener，并在输入更改时使用GetDay()检查date day === 6。您可以通过更改选项的“disabled”属性来禁用这些选项。

你可以看看我是如何做到这一点的。

const select = document.querySelector('select');
const options = document.querySelectorAll('option');
const input = document.querySelector('#datepicker');

const toggleOptions = (e) => {
  console.log(e.target.value)
  const date = new Date(e.target.value)
  if(date.getDay() === 6) {
    select.value = "";
    options[6].disabled = true;
    options[7].disabled = true;
  } else {
    options[6].disabled = false;
    options[7].disabled = false;
  }
}

input.addEventListener('change', toggleOptions )

<select placeholder="hour">
        <option selected disabled value="">select hour</option>
        <option value="7-9">7-9</option>
        <option value="9-11">9-11</option>
        <option value="11-13">11-13</option>
        <option value="13-15">13-15</option>
        <option value="15-17">15-17</option>
        <option value="17-19">17-19</option>
        <option value="19-22">19-22</option>
    </select>

<input id="datepicker" class="datepiker" autocomplete="off" type="text"  placeholder="select date" required>

​