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

最新推荐文章于 2019-07-27 13:17:13 发布

tansci

最新推荐文章于 2019-07-27 13:17:13 发布

阅读量487

点赞数 2

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/typ1805/article/details/95626650

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

一、准备工作

My97DatePicker下载：http://www.my97.net/down.asp

Jquery下载：https://jquery.com/download/

日期图标：

二、编码

1、引入所需的依赖

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>

2、css样式

<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>

3、HTML代码

<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>

4、JS代码

<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>

三、完整代码

<!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>

效果图如下：

欢迎关注

tansci

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用My97DatePicker封装一个双选日期组件

由于项目中使用My97DatePicker作为日期控件，额外不用其它日期组件。但是项目需要用到双选日期，一方面放两个空间有限，另一方面看起也不太美观，所以就简单的自己封装一个。一、准备工作 My97DatePicker下载：http://www.my97.net/down.asp Jquery下载：https://jquery.com/download/ 日期图标...
复制链接

扫一扫

专栏目录