daterangepicker实现双日历的时间段选择

最新推荐文章于 2024-03-17 09:44:34 发布

珊珊美眉

最新推荐文章于 2024-03-17 09:44:34 发布

阅读量913

点赞数 1

分类专栏：双日历 daterangepicker 文章标签： javascript

本文链接：https://blog.csdn.net/small_33/article/details/107937115

版权

双日历同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

daterangepicker

1 篇文章 0 订阅

订阅专栏

前端的插件真的是数不胜数哦~ 今天珊妹儿来给大家分享个双日历的时间段选择插件，那就是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

效果展示：

如有问题欢迎大家留言~~~

珊珊美眉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
daterangepicker实现双日历的时间段选择

前端的插件真的是数不胜数哦~ 今天珊妹儿来给大家分享个双日历的时间段选择插件，那就是daterangepicker,平时我们日期选择用的都是datetimepicker，这是单日历的插件，下面给大家双日历的文件下载链接：https://www.daterangepicker.cn/#usage这里展示的是下载的地方：下载下来的目录是这样的：但是需要注意的是：我们用这个插件是在jquery的基础上，然后下载下来的文件里并没有jquery,所以这里我们自己可以去下载jquery.min.js..
复制链接

扫一扫