Посоветуйте хороший timepicker для веба (с возможностью запрета нескольких диапазонов времени)

Question

Для одного проекта со сложной системой бронирования необходим таймпикер, где были бы видны запрещенные в выбору промежутки времени. Сделал на списке выбора (картинка выше), но мне не нравится как это выглядит. Проблема в том, что я даже не видел ничего подобного, чтобы иметь представление как сделать самому.

Answer 1

Можно, например, сделать так:

select {
  background-color: #759CBA;
  color: #fff;
  border: 0px none;
  border-radius: 0;
  width: 70px;
  outline: none;
}

select option {
  padding: 5px;
  border-bottom: 1px solid #fff;
  text-align: center;
}

select option:disabled {
  border-bottom-color: #bbb;
  background-color: #ccc;
}

select option:selected {
  background-color: coral;
}

<select id="hours" size="10">
  <option value="0" disabled>0</option>
  <option value="1" disabled>1</option>
  <option value="2" disabled>2</option>
  <option value="3" disabled>3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20" disabled>20</option>
  <option value="21" disabled>21</option>
  <option value="22" disabled>22</option>
  <option value="23" disabled>23</option>
</select>

<select id="minutes" size="10">
  <option value="0" disabled>00</option>
  <option value="5" disabled>05</option>
  <option value="10" disabled>10</option>
  <option value="15">15</option>
  <option value="20">20</option>
  <option value="25">25</option>
  <option value="30">30</option>
  <option value="35">35</option>
  <option value="40">40</option>
  <option value="45">45</option>
  <option value="50">50</option>
  <option value="55">55</option>
</select>

Скриптом расставлять "disabled" опшенам в селектах в зависимости от желаемого диапазона времени.

БЛОГ НА HUSL

Посоветуйте хороший timepicker для веба (с возможностью запрета нескольких диапазонов времени)

Ответы (1 шт):