日历时间插件，复制直接用

最新推荐文章于 2024-06-23 23:43:41 发布
郭豪杨
最新推荐文章于 2024-06-23 23:43:41 发布
阅读量424
点赞数
文章标签： js html javascript
本文链接：https://blog.csdn.net/weixin_42603150/article/details/110135128
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

    <style type="text/css">
        .input-form {
            margin-left: 10px;
            float: left;
            position: relative;
            width: 24%;
            height: 36px;
            margin-bottom: 15px;
            /* background: darkcyan; */
        }
        .form_div_time_span {
            float: left;
            display: inline-block;
            margin-top: 3px;
            font-size: 12px;
            height: 100%;
            width: 34%;
            text-align: right;
            /* font-weight: bold; */
            line-height: 26px;
        }
        .btn_rili {
            border-radius: 3px;
            float: left;
            margin-left: 2%;
            font-size: 12px;
            height: 36px;
            background: white;
            /* padding: 4px 7px; */
            font-size: 12px;
            outline: none;
            border: 1px solid #d7dde4;
            width: 64%;
        }
    </style>
</head>
<body>
<!-- 日期时间范围选择代码 -->
<div class="input-form">
    <span class="form_div_time_span">时间:</span>
    <!--<input type="text">-->
    <button type="button" class="btn_rili">
        <span class="span_s"></span>
    </button>
</div>

</body>
</html>

<script>

</script>
<script>

    $('.span_s').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));

    $('.btn_rili').daterangepicker({
            timePicker:true,
            singleDatePicker:false,
            showDropdowns:true,
            timePicker24Hour:true,
            timePickerSeconds:true,
            endDate: moment(),
            ranges: {

                '今天': [moment(), moment()],

                '最近一小时': [moment().subtract('hours',1), moment()],

                '最近三小时': [moment().subtract('hours',3), moment()],

                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],

                '最近三天': [moment().subtract(2, 'days'),moment()],

                '最近一周': [moment().subtract(6, 'days'),moment()],

                '最近两周': [moment().subtract(13, 'days'),moment()],

                '最近一个月': [moment().subtract(29, 'days'),moment()],
            },
            locale: {
                format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
                applyLabel: '确定', //确定按钮文本
                cancelLabel: '取消', //取消按钮文本
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月'
                ],
                firstDay: 1
            },
        },
        function(start, end, label) {

            // for(var i=0;i<ui_li.length;i++){
            //
            //     console.log(ui_li[i])
            //
            //     console.log($(this).hasClass('active'))
            //
            //
            //



            var date = new Date();
            var hour = date.getHours();   //时
            var minutes = date.getMinutes() ;  //分
            var Second=date.getSeconds(); //秒

            if (hour >= 1 && hour <= 9) {  //时
                hour = "0" + hour;
            }
            if (minutes >= 1 && minutes <= 9) {  //分
                minutes = "0" + minutes;
            }
            if (Second >= 1 && Second <= 9) {  //秒
                Second = "0" + Second;
            }
            var currentdate =hour+":"+minutes+":"+Second ;


            if(label=='今天'){

                $('.span_s').html(start.format('YYYY-MM-DD 00:00:00') +' - '+end.format('YYYY-MM-DD') +' '+ currentdate)
            }
            if(label=='最近一小时'){

                $('.span_s').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'))
            }
            if(label=='最近三小时'){
                $('.span_s').html(moment().subtract('hours', 3).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'))
            }
            if(label=='昨天'){
                $('.span_s').html(start.format('YYYY-MM-DD 00:00:00') +' - '+end.format('YYYY-MM-DD 23:59:59'))
            }
            if(label=='最近三天'){
                $('.span_s').html(start.format('YYYY-MM-DD')+' '+ currentdate +' - '+end.format('YYYY-MM-DD') + ' '+currentdate)
            }
            if(label=='最近一周'){
                $('.span_s').html(start.format('YYYY-MM-DD')+' '+ currentdate +' - '+end.format('YYYY-MM-DD') +' '+ currentdate)
            }
            if(label=='最近两周'){
                $('.span_s').html(start.format('YYYY-MM-DD')+' '+ currentdate +' - '+end.format('YYYY-MM-DD') + ' '+currentdate)
            }
            if(label=='最近一个月'){
                $('.span_s').html(start.format('YYYY-MM-DD')+' '+ currentdate +' - '+end.format('YYYY-MM-DD') +' '+ currentdate)
            }
            if(label=='自定义'){
                $('.span_s').html(start.format('YYYY-MM-DD HH:mm:ss') +' - '+end.format('YYYY-MM-DD HH:mm:ss'))
            }


        });



    $('.ranges ul li').click(function(){
        var str_s=$('.span_s').text();
        if($(this).hasClass("active")){
            console.log($(this));
        }

        $('.btn_rili').attr('title',str_s)


    });








</script>