javascript - 如何将 Bootstrap 3 时间选择器显示为网格
问题描述
我有 Bootstrap 3 和它的 datetimepicker。它像这样显示时间选择器:
...但我需要它看起来像这样:
这是代码:
$(selector).datetimepicker({
format: 'YYYY\-MM\-DD HH:mm',
locale: 'ru',
allowInputToggle: true,
showTodayButton: true,
icons: {
today: 'today-button-pf'
},
defaultDate: date,
stepping: 15
});
我应该怎么办?谢谢
解决方案
您可以使用这些 jQuery 插件之一。
- https://www.jqueryscript.net/time-clock/Time-Picker-Dropdown-timeSelect.html
- https://www.jqueryscript.net/time-clock/Select-Date-Time-In-Next-7-Days-jQuery-Calendar7.html
更新
索引.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
}
main.js
jQuery('.calendar7').Calendar7({
allowTimeStart: '0:00',
allowTimeEnd: '23:00'
})
推荐阅读
- spring - Spring Boot+Thymeleaf 无法解析 login.html
- xcode - 具有cordova-plugin-firebase然后添加cordova-plugin-firebase-dynamiclinks时Xcode中的“架构x86_64的195个重复符号”
- scala - Scala Spark-使用Array [String]进行GroupBy匹配记录(如果包含在其他记录元素中作为列表)
- java - TimerTask 和 Timer:实例变量的行为
- apigee - 我希望 Apigee 中的代理每 1 分钟调用一次
- search - 按用户访问权限搜索 Gerrit 更改
- java - 将类与相同类型关联
- docker - 什么是从一个容器到另一个容器的 url 服务?
- angular - 如何根据条件禁用 Mat-tree 组件?
- unit-testing - 使用 jasmine / spyOn 模拟对象的属性