0

введите сюда описание изображения

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

2
  • Самый главный прЫнцип: если в предлагаемых вариантах выбора что-то не должно быть выбираемо в принципе, это что-то ВООБЩЕ не нужно показывать. Уберите промежутки времени, которые нельзя предлагать. 8 июл 2021 в 14:54
  • Вначале так и было. Но требование такое, чтобы занятое время было видно. Вопрос в более удобной юзабельности, ибо листать длинный селект пользователю не комфортно.
    – Denis I
    9 июл 2021 в 0:51

1 ответ 1

0

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

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" опшенам в селектах в зависимости от желаемого диапазона времени.

1
  • Они итак меняют стиль и становятся disabled. Вопрос в том, что селект просто не красиво выглядит и нужен хотя бы пример подобной реализации, приятный глазу.
    – Denis I
    9 июл 2021 в 0:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.