使用My97DatePicker封装一个双选日期组件

喜欢ヅ旅行 2021-12-12 16:59 201阅读 0赞

由于项目中使用My97DatePicker作为日期控件，额外不用其它日期组件。但是项目需要用到双选日期，一方面放两个空间有限，另一方面看起也不太美观，所以就简单的自己封装一个。

### 一、准备工作 ###

My97DatePicker下载：[http://www.my97.net/down.asp][http_www.my97.net_down.asp]

Jquery下载：[https://jquery.com/download/][https_jquery.com_download]

日期图标：![20190712164725955.png][]

### 二、编码 ###

**1、引入所需的依赖**

**2、css样式**

**3、HTML代码**

**4、JS代码**

### 三、完整代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
        <style>
            .llgkdatepicker{ width:170px; height: 14px; line-height: 14px; font-size: 14px; padding: 23px 20px 23px 18px; float: left; color: #2E80F1; background-image: url("themes/default/images/date.png"); background-repeat: no-repeat; background-position: 0px 23px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;}
            .datechoose{position:absolute;width:660px;height:246px;margin-top:50px;z-index:10;box-shadow:0px 0px 6px #cfcfcf}
            .datechoose .maindiv{float:left;width:450px;height:100%;background-color:#fff}
            .filterdiv{float:left;width:210px;height:246px;background-color:#EBF0F4}
            .maindiv .timespan{padding:13px 10px;height:14px}
            .datachoosetsp{width:86px;height:14px;line-height:14px;font-size:12px;color:#737373;float:left;text-align:center;cursor:pointer}
            .datachoosetsp.on{color:#1180F3}
            .datediv{float:left;width:210px;height:196px;padding-left: 12px}
            .chosendate{width:210px;height:36px;line-height:36px;font-size:12px;text-align:center;color:#656668;margin-top: 40px;font-size: 14px}
            .chosendate.on{color:#1180F3;background-color:#fff}
            .filterbtnarea{padding:136px 50px 10px;height:24px}
            .btn3.dateconfirm{color:#fff;background-color:#F54434;border:1px solid #F54434;width:48px;float:left}
            .btn3.datecancle{color:#F54434;background-color:#fff; border:1px solid #ffffff;width:48px;float:left; margin-left: 10px}
            .datediv iframe{width:210px;height:196px}
            .btn3{width:54px;height:22px;border:1px solid #51C0ED;color:#51C0ED;cursor:pointer;text-align:center;border-radius:3px;;line-height:22px;font-size:14px}
        </style>
    </head>
    <body>
    <div style="padding-left: 500px">
        <div class="llgkdatepicker" onclick="showDate()"></div>
        <div class="datechoose">
            <div class="maindiv">
                <div class="timespan">
                    <div id="data7" class="datachoosetsp on" value="7">近7天</div>
                    <div id="data30" class="datachoosetsp" value="30">近30天</div>
                    <div id="data60" class="datachoosetsp" value="60">近60天</div>
                    <div id="data1" class="datachoosetsp" value="1">今年</div>
                    <div id="data2" class="datachoosetsp" value="2">去年</div>
                </div>
                <div id="date1" class="datediv"></div>
                <div id="date2" class="datediv"></div>
            </div>
            <div class="filterdiv">
                <div class="chosendate on">
                    <span id="startDate"></span>-<span id="endDate"></span>
                </div>
                <div class="filterbtnarea">
                    <div class="floatR">
                        <div class="btn3 dateconfirm" onclick="dateconfirm()">确定</div>
                        <div class="btn3 datecancle m10" onclick="datecancle()">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    
    <script>
        $(function () {
            // 初始化
            wdatePicker(getDate(6), getDate(0));
    
            // 头部时间段选择选择
            $(".datachoosetsp").click(function(){
                var startDate, endDate;
                $(".datachoosetsp").removeClass("on");
                $(this).addClass("on");
                if($(this).attr("value") == 7){
                    startDate = getDate(6);
                    endDate = getDate(0);
                } else if($(this).attr("value") == 30){
                    startDate = getDate(30);
                    endDate = getDate(0);
                } else if($(this).attr("value") == 60){
                    startDate = getDate(60);
                    endDate = getDate(0);
                } else if($(this).attr("value") == 1){
                    startDate = (new Date().getFullYear()) + "-01-01";
                    endDate = getDate(0);
                } else if($(this).attr("value") == 2){
                    startDate = (new Date().getFullYear()-1) + "-01-01";
                    endDate = (new Date().getFullYear()-1) + "-12-31";
                }
                wdatePicker(startDate, endDate);
                $(".datechoose").show();
            });
        });
    
        function showDate(){
            $(".datechoose").toggle();
        }
    
        function wdatePicker(start,end){
            $(".datechoose").hide();
            WdatePicker({startDate:start,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date1',
                onpicked:function(dp){
                    $("#startDate").text(dp.cal.getDateStr());
                    $(".datachoosetsp").removeClass("on");
                }
            });
            WdatePicker({startDate:end,alwaysUseStartDate:true,isShowWeek:true,maxDate:'%y-%M-%d',eCont:'date2',
                onpicked:function(dp){
                    $("#endDate").text(dp.cal.getDateStr());
                    $(".datachoosetsp").removeClass("on");
                }
            });
            // 初始化日期
            if($(".llgkdatepicker").text() == ""){
                $(".llgkdatepicker").html(start + "-" + end);
            }
            $("#startDate").text(start);
            $("#endDate").text(end);
        }
        // 确认按钮
        function dateconfirm(){
            var startDate = $("#startDate").text();
            var endDate = $("#endDate").text();
            if(startDate>endDate){
                alert("结束日期不能小于开始日期！");
                return false;
            } else{
                $(".llgkdatepicker").html(startDate+"-"+endDate);
                $(".datechoose").hide();
            }
        }
        // 取消按钮
        function datecancle(){
            $(".datechoose").hide();
        }
    
        // 日期格式化
        function getDate(count) {
            var date = new Date();
            date.setDate(date.getDate()-count);
            var year = date.getFullYear();
            var month = (date.getMonth()+1) < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
            var day = date.getDate() < 10 ? "0"+date.getDate() : date.getDate();
            var dateStr = year + "-" + month + "-" + day;
            return dateStr;
        }
    </script>
    </html>

**效果图如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70][]

**欢迎关注**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70 1][]

[http_www.my97.net_down.asp]: http://www.my97.net/down.asp
[https_jquery.com_download]: https://jquery.com/download/
[20190712164725955.png]: /images/20211210/50636209103b4f478b229be539950f9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70]: /images/20211210/58de028c54d84b07b086593ad7e64896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70 1]: /images/20211210/d5c9a05d6b6649ebb72bec7aca592b61.png