bootstrap-datetimepicker实现日期多选（过滤周末）

張葒兵

已于 2022-05-14 13:49:22 修改

阅读量2.1k

点赞数

分类专栏： JAVA JS JQuery 文章标签： bootstrap html css

于 2022-05-11 10:49:00 首次发布

本文链接：https://blog.csdn.net/zhb2010zhb/article/details/124704896

版权

JAVA 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

bootstrap日期多选功能，找了好久，好多直接都给了一个图片和官网地址，也没有说具体需要哪些js和css，这边自己弄出来一个demo，js和css都是走cdn,我也弄了一个本地包放到云盘，欢迎下载（永久有效）

链接：https://pan.baidu.com/s/1Kw71q9Sog68HjfjuAqh2xg
提取码：1kbq

效果图：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期选择器-多选</title>
    <meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
          http-equiv="x-ua-compatible" >
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcdn.net/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet">
</head>
<body>
 
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5"/>
        </div>
    </div>
     <div class="row">
        <div class="col-sm-6">
            <!-- 日期多选 -->
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6"/>
        </div>
    </div>
</div>
 
 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript">
 
    //ajax请求
    $(function(){

         //实现多选
         $('#datetimepicker6').datetimepicker({
            format: 'YYYY/MM/DD',//日期格式
            //autoclose: true,//Boolean. 默认值：false。当选择一个日期之后是否立即关闭此日期时间选择器。
            //周末不允许选中
            daysOfWeekDisabled: [0, 6],
            allowMultidate: true,
            multidateSeparator: ','
        });

        //日期-最全参数
        $('#datetimepicker5').datetimepicker({
            format: 'YYYY/MM/DD',//日期格式
            autoclose: true,//Boolean. 默认值：false。当选择一个日期之后是否立即关闭此日期时间选择器。
            viewMode: 'days',
            buttons: {
                showToday: true,
                showClear: true,
                showClose: true
            },
            icons: {
                today: 'fa fa-caret-square-o-right',
                clear: 'fa fa-trash-o',
                close: 'fa fa-close'
            },
            tooltips:{
                today: '今天',
                clear: '清除',
                close: '关闭',
                selectMonth: '选择月份',
                prevMonth: '上个月',
                nextMonth: '下个月',
                selectYear: '选择年份',
                prevYear: '上一年',
                nextYear: '下一年',
                selectDecade: '选择时期',
                prevDecade: '上个年代',
                nextDecade: '下个年代',
                prevCentury: '上个世纪',
                nextCentury: '下个世纪',
                incrementHour: '增加一小时',
                pickHour: '选择小时',
                decrementHour:'减少一小时',
                incrementMinute: '增加一分钟',
                pickMinute: '选择分',
                decrementMinute:'减少一分钟',
                incrementSecond: '增加一秒',
                pickSecond: '选择秒',
                decrementSecond:'减少一秒'
            },//这会将tooltips每个图标上方的内容更改为自定义字符串。
            locale: 'zh-cn'
        });
       
    });
</script>
</body>
</html>

发现一个问题：设置开始和结束时间时，选中结束时间时会报错

解决方案：因为我是YYYY-MM-DD 格式，结束日期一定要加上时分秒，因为选中日期时会用当前时间和最大日期进行比较，如果不加时分秒默认 2022-05-18 00:00:00 ，一比较就报错了

$('#datetimepicker6').datetimepicker('minDate', new Date("2022-05-11"));
$('#datetimepicker6').datetimepicker('maxDate', new Date("2022-05-18 23:59:59"));

張葒兵

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
bootstrap-datetimepicker实现日期多选（过滤周末）

bootstrap日期多选功能，找了好久，好多直接都给了一个图片和官网地址，也没有说具体需要哪些js和css，这边自己弄出来一个demo，js和css都是走cdn,我也弄了一个本地包放到云盘，欢迎下载（永久有效）
复制链接

扫一扫

专栏目录