Datepicker javascript отключить опцию, если день == 6 - PullRequest
Новая
       11

Datepicker javascript отключить опцию, если день == 6

0 голосов
/ 03 августа 2020

помогите, пожалуйста, как отключить опцию: 

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

Если пользователь выбирает субботу, я использую datepicker 

<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>

1 Ответ

0 голосов
/ 03 августа 2020

Если вы хотите сделать это самостоятельно, вы можете использовать EventListener в своем элементе ввода и проверить, если date day === 6 с помощью GetDay () при изменении ввода. Вы можете отключить параметры, изменив их свойство «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>
...