Bootstrap时间选择器

发表于 | 分类于 | 阅读次数

0 Bootstrap-datetimepicker

这次用到了一个时间选择器的插件Bootstrap-datetimepicker，功能丰富，可以选择小时时间点，UI 基于Bootstrap 十分简洁。

1.加载

从官网下载后，引入以下五个文件即可：

  • bootstrap.min.js
  • bootstrap-datetimepicker.min.js
  • bootstrap.min.css
  • bootstrap-datetimepicker.min.css
  • bootstrap-datetimepicker.fr.js

2.初始化

先创建一个text表单，要把属性设置为 readOnly ，否则手机端点击会打开输入法，影响体验

1
2
3
4
5
<input type="text" value="" id="datetimepicker" data-date-format="mm-dd hh:ii" readonly>
<!-- 初始化插件 -->
<script>
    $('#datetimepicker').datetimepicker();
</script>

3.用法

日期的格式可以在html标签里 data-date-format 属性更改，也可以在初始化时更改，此外，还有很多 option可调整。

1
2
3
4
5
6
7
8
9
$('#datetimepicker').datetimepicker({
    'format': "mm-dd hh:ii", // 日期格式
    'autoclose'：true,       // 选定时间后自动关闭浮窗
    'startDate' : startDate, // 限制选择的开始时间
    'endDate': endDate,      // 限定结束时间
    'startView': 1,          // 选择一开始的视图0:小时,1:天,2:月份，3:年数,4:十年
    'minView' :  1,          // 可选择的最小时间段，参数同上
    'maxView' :  1,          // 可选择的最大时间段，参数同上
});

datetimepicker还提供了 show、changeDate 等时间监听，可以在时期数据变更时及时做出响应：

1
2
3
4
5
6
7
8
9
10
// 时间函数是自己写的
startPicker.on('show', function (ev) {
    startPicker.datetimepicker('setStartDate', new Date(hourAgo(8)*1000));
    startPicker.datetimepicker('setEndDate',new Date(nowTimestamps()*1000));
})
// 限制结束日期在开始日期之后
startPicker.datetimepicker().on('changeDate', function (ev) {
    endPicker.datetimepicker('setStartDate', ev.date);
    endPicker.datetimepicker('setEndDate',new Date(nowTimestamps()*1000));
})

还有更多的用法可以参考文档

4.JS 的时间格式转换

js 时间处理围绕着 Date 这个对象，js不像php那样有 strtotime 这些可以将字符串直接转换成时间戳的函数，所以一些时间格式转换函数需要自己去写。而date的getTime函数获取到的是毫秒级的时间戳。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 获取num小时前的秒级时间戳
function hourAgo(num) {
    const hour = num*60*60;
    var now = Math.round( (new Date().getTime())/1000 );
    return now - hour;
}
// 获取现在的秒级时间戳
function nowTimestamps() {
    return Math.round( (new Date().getTime())/1000 );
}
// 将mm-dd H:i日期格式转化为时间戳
function dateToTime(date) {
    var now = new Date();
    var year = now.getFullYear();
    var _time = new Date(year + '-' + date);
    _time = Math.round(_time.getTime()/1000); // 去掉毫秒
    return _time;
}
// 将时间戳转化为mm-dd HH:ii日期格式 其他格式同理
function timeToDate(time) {
    var date = new Date(time);
    var month = date.getMonth()+1;
    var day = date.getDate();
    var hour = date.getHours() + ':';
    var min = date.getMinutes();
    return month + '-' + day + ' ' + hour + min;
}

这里发现一个巨大的坑： ios浏览器环境下，创建Date(time)实例时，实际上是调用了Date.parse(), 如果日期是 ‘-‘ 连接，会出现实例化失败，改成 ‘/‘ 即可。

5.php的时间格式转换

php就方便多了

  • time() 获取当前时间戳，秒级
  • strtotime() 将字符串转化为时间戳
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$now = time();
$date = date('Y-m-d H:i:s', $now); // 这样就获取了一个格式化后的时间戳
$timestamp = strtotime($date); // 这样就把日期格式转化为时间戳了！
// strtotime() 还可以这样！
echo strtotime("now")."\n";
echo strtotime("10 September 2000")."\n";
echo strtotime("+1 day")."\n";
echo strtotime("+1 week")."\n";
echo strtotime("-1 week")."\n"; // 符号是上周
echo strtotime("+1 week 2 days 4 hours 2 seconds")."\n";
echo strtotime("next Thursday")."\n";
echo strtotime("last Monday")."\n";
echo strtotime("20170808 23:00:01")."\n";