Javascript 如何将Bootstrap3时间选择器显示为网格
我有Bootstrap3和它的datetimepicker。它显示时间选择器,如下所示: 。。。但我需要它看起来像这样: 代码如下:Javascript 如何将Bootstrap3时间选择器显示为网格,javascript,twitter-bootstrap-3,Javascript,Twitter Bootstrap 3,我有Bootstrap3和它的datetimepicker。它显示时间选择器,如下所示: 。。。但我需要它看起来像这样: 代码如下: $(selector).datetimepicker({ format: 'YYYY\-MM\-DD HH:mm', locale: 'ru', allowInputToggle: true, showTodayButton: true, icons: {
$(selector).datetimepicker({
format: 'YYYY\-MM\-DD HH:mm',
locale: 'ru',
allowInputToggle: true,
showTodayButton: true,
icons: {
today: 'today-button-pf'
},
defaultDate: date,
stepping: 15
});
我该怎么办?谢谢您可以使用这些jQuery插件之一
工作示例虽然此链接可以回答问题,但最好在此处包含答案的基本部分,并提供链接供参考。如果链接页面发生更改,仅链接的答案可能无效。-@Ankh更新了答案,感谢您的评论。
<input class="calendar7">
.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
}
jQuery('.calendar7').Calendar7({
allowTimeStart: '0:00',
allowTimeEnd: '23:00'
})