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

news/2024/7/19 14:05:37 标签: js

      由于项目中使用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>

效果图如下：

欢迎关注

 


http://www.niftyadmin.cn/n/857089.html

相关文章

jpa oracle默认序列,為什么使用帶有Oracle 10g方言的Hibernate使用JPA創建一個名為hibernate_sequence的序列？...

jpa oracle默认序列,為什么使用帶有Oracle 10g方言的Hibernate使用JPA創建一個名為hibernate_sequence的序列？...

4I see the following code in org.hibernate.id.SequenceGenerator:我在org.hibernate.id.SequenceGenerator中看到以下代碼:public void configure(Type type, Properties params, Dialect dialect) throws MappingException {ObjectNameNormalizer normalizer ( ObjectName…
阅读更多...
关闭linux系统命令是什么,linux shutdown关闭系统命令使用介绍

关闭linux系统命令是什么,linux shutdown关闭系统命令使用介绍

关闭、重启系统Linux是一个多用户、多任务系统&#xff0c;如果不正确地关闭或重启系统&#xff0c;可能会导致系统中的用户数据丢失。可能的情况是用户正在执行某个关键的运算或操作等&#xff0c;如果不经提示关闭系统&#xff0c;用户将来不及保存当前数据&#xff0c;从而导…
阅读更多...
内网穿透之HTTP穿透

内网穿透之HTTP穿透

一、内网穿透 在很多开发的时候需要临时体验开发时往往没有公网域名或者公网IP&#xff0c;本篇介绍一个有钉钉官方提供的一个公网代理服务&#xff0c;目的是方便开发测试。 二、准备工作 1、官方文档&#xff1a;https://open-doc.dingtalk.com/microapp/kn6zg7/hb7000 2、…
阅读更多...
.a 和.o 合并成一个.a_泉美环保为您讲解地埋式污水处理设备A/O工艺详情

.a 和.o 合并成一个.a_泉美环保为您讲解地埋式污水处理设备A/O工艺详情

不管什么类型的废水处理设备工艺都是其中的核心部分&#xff0c;而A/O工艺可以说是目前地埋式污水处理设备使用比较广泛成熟的一种工艺&#xff0c;虽然算不上很先进的工艺但是胜在处理效果稳定、质优价廉&#xff0c;还是比较推荐大家了解使用的。今天泉美环保公司就给您详解介…
阅读更多...
JS实现数字翻牌效果

JS实现数字翻牌效果

JS实现数字变化翻牌效果 一、效果图如下&#xff1a; 二、代码如下&#xff1a; 注意&#xff1a;需要引入JQuery.js。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>数字翻牌器</title>&…
阅读更多...
linux内核运行关系图,[科普] Linux 的内核与 Linux 系统之间的关系

linux内核运行关系图,[科普] Linux 的内核与 Linux 系统之间的关系

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼在 FHS 协议里&#xff0c;有这样的规定&#xff1a;/bin/ 需要在单用户模式可用的必要命令(可执行文件)&#xff1b;面向所有用户&#xff0c;例如&#xff1a; cat、 ls、 cp。/boot/ 引导程序文件&#xff0c;例如&#xff1a; …
阅读更多...
巨潮网怎么下载年报_个体户注意了，市场监管部门喊你年报啦

巨潮网怎么下载年报_个体户注意了，市场监管部门喊你年报啦

为减少疫情影响&#xff0c;推动个体工商户有序复工复产&#xff0c;2019年度个体工商户年报时间延长至2020年12月31日。目前离截止时间不到一个月了&#xff0c;未年报的个体户要抓紧上最后一趟末班车了&#xff0c;毕竟逾期或不上报&#xff0c;系统将自动列入经营异常名录。…
阅读更多...
linux端口混杂模式,Linux下网卡混杂模式设置和取消(示例代码)

linux端口混杂模式,Linux下网卡混杂模式设置和取消(示例代码)

1、Linux下网卡常用的几种模式说明&#xff1a;广播方式&#xff1a;该模式下的网卡能够接收网络中的广播信息。组播方式&#xff1a;设置在该模式下的网卡能够接收组播数据。直接方式&#xff1a;在这种模式下&#xff0c;只有目的网卡才能接收该数据。混杂模式&#xff1a;在…
阅读更多...
最新文章

Copyright @ 2022~2023