Для одного проекта со сложной системой бронирования необходим таймпикер, где были бы видны запрещенные в выбору промежутки времени. Сделал на списке выбора (картинка выше), но мне не нравится как это выглядит. Проблема в том, что я даже не видел ничего подобного, чтобы иметь представление как сделать самому.
-
Самый главный прЫнцип: если в предлагаемых вариантах выбора что-то не должно быть выбираемо в принципе, это что-то ВООБЩЕ не нужно показывать. Уберите промежутки времени, которые нельзя предлагать.– ИнквизиторCommented 8 июл. 2021 в 14:54
-
Вначале так и было. Но требование такое, чтобы занятое время было видно. Вопрос в более удобной юзабельности, ибо листать длинный селект пользователю не комфортно.– Denis ICommented 9 июл. 2021 в 0:51
Добавить комментарий
|
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" опшенам в селектах в зависимости от желаемого диапазона времени.
-
Они итак меняют стиль и становятся disabled. Вопрос в том, что селект просто не красиво выглядит и нужен хотя бы пример подобной реализации, приятный глазу.– Denis ICommented 9 июл. 2021 в 0:53