Как отобразить таймпикер Bootstrap 3 в виде сетки - PullRequest
Новая
       80

Как отобразить таймпикер Bootstrap 3 в виде сетки

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

У меня есть Bootstrap 3 и его datetimepicker. Он отображает таймпикер следующим образом:

enter image description here

... but I need it looks like this:

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

Это код: 

$(selector).datetimepicker({
        format: 'YYYY\-MM\-DD HH:mm',
        locale: 'ru',
        allowInputToggle: true,
        showTodayButton: true,
        icons: {
            today: 'today-button-pf'
        },
        defaultDate: date,
        stepping: 15
    });

Что мне делать? Спасибо

1 Ответ

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

Вы можете использовать один из этих jQuery плагинов.

Обновление

индекс. html

<input class="calendar7">

стиль. css

.calendar-7 {
  position: absolute;
  width: 376px;
  background-color: #72b8ff;
  padding: 8px
}

.calendar-7 .days {
  color: white;
  font: 14px normal;
  width: 100%;
  text-align: center
}

.calendar-7 .days .calendar-7-day {
  display: inline-block;
  cursor: pointer;
  width: 13%;
  height: 55px;
  padding-top: 8px;
  margin-bottom: 8px
}

.calendar-7 .days .calendar-7-day:hover, .calendar-7 .days .calendar-7-day.active { background-color: #2874c6 }

.calendar-7 .hours, .calendar-7 .minutes {
  background-color: white;
  width: 360px;
  height: 162px;
  margin: 0 auto;
  border-radius: 4px
}

.calendar-7 .minutes {
  display: none;
  height: 81px
}

.calendar-7 .calendar-7-hour, .calendar-7 .calendar-7-minute {
  float: left;
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  font: 14px normal;
  padding: 4px;
  color: #4a4a4a;
  text-align: center;
  cursor: pointer
}

.calendar-7 .calendar-7-hour:hover, .calendar-7 .calendar-7-minute:hover, .calendar-7 .calendar-7-hour.active, .calendar-7 .active.calendar-7-minute {
  background-color: #53a2f6;
  color: white;
  border-radius: 3px
}

.calendar-7 .calendar-7-hour.disabled, .calendar-7 .disabled.calendar-7-minute {
  color: #333;
  background-color: #eee;
  cursor: not-allowed
}

основной. js

jQuery('.calendar7').Calendar7({
  allowTimeStart: '0:00',
  allowTimeEnd: '23:00'
})

Рабочий пример https://codepen.io/iftikharyk/pen/VwaYZVN

...