前端的插件真的是数不胜数哦~ 今天珊妹儿来给大家分享个双日历的时间段选择插件,那就是daterangepicker,平时我们日期选择用的都是datetimepicker,这是单日历的插件,下面给大家双日历的文件下载链接:https://www.daterangepicker.cn/#usage
这里展示的是下载的地方:下载下来的目录是这样的:
但是需要注意的是:我们用这个插件是在jquery的基础上,然后下载下来的文件里并没有jquery,所以这里我们自己可以去下载jquery.min.js;
在这里珊妹儿给大家写了个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双日历</title>
<script src="./jquery.min.js"></script>
<script src="./moment.min.js"></script>
<script src="./daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="./daterangepicker.css"/>
</head>
<body>
<input type="text" name="datetimes" style="width: 400px;" placeholder="请选择"/>
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker:true, //显示时间
timePicker24Hour:true, //显示时间为24小时制
timePickerSeconds: true, //时间显示到秒
startDate:moment().startOf('hour'),
endDate:moment().startOf('hour').add(32, 'hour'),
locale: {
format:'YYYY-MM-DD HH:mm:ss a',
separator: ' ~ ',
applyLabel: "应用",
cancelLabel: "取消",
resetLabel: "重置",
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
}
});
});
</script>
</body>
</html>
如果大家想默认展示请选择,而不是具体时间的话,可以参考这个帖子进行修改:https://www.cnblogs.com/zousaili/p/8268147.html
效果展示:
如有问题欢迎大家留言~~~