一个日历插件

工作中用到的日历插件，下面做了个简单的demo，不做过深的研究，简单记录下并做分享。

二话不说上图：

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8" ></script>
    </head>
    <body>
    <script  type="text/javascript" charset="utf-8" >
        $(document).ready(function(){ 
            $('#span_right_time_01').html(currentTime);
            $('#span_right_time_02').html(currentMonthTime);
        });
        function currentTime(){
                var d = new Date();
                //d.setDate(d.getDate()-2);
                str = '';
                var y = d.getFullYear();
                var m = (d.getMonth()+1)+"";
                var d =  d.getDate()+"";
                //alert(m.length);
                if(m.length==1){
                    m = '0'+m;
                }
                if(d.length==1){
                    d = '0'+d;
                }
                str = y+"-"+m+"-"+d
                return str;
            }
            function currentMonthTime(){
                var d = new Date();
               // d.setMonth(d.getMonth()-2);
                str = '';
                var y = d.getFullYear();
                var m = (d.getMonth()+1)+"";
                //alert(m.length);
                if(m.length==1){
                    m = '0'+m;
                }
                str = y+"-"+m
                return str;
            }
    </script>
        <br>
    <div style="background:#215981;width:200px;height:30px;margin:0 auto;">
         <span style="margin-left:10%;color:#c3e2ff;font-size:14px;font-weight:bold;" >日历:
        </span>
         <span id="span_right_time_01"  style="color:#c3e2ff;font-size:14px;font-weight:bold;" >
   </span>
    <!--$dp.$('span_right_time_01')-->
    <img src="icon_rxuanzeqi.png" onclick="WdatePicker({el:$dp.$('span_right_time_01'),dateFmt:'yyyy-MM-dd'})"/></div>
    <br><br><br>
    <div style="background:#215981;width:200px;height:30px;margin:0 auto;">
         <span style="margin-left:10%;color:#c3e2ff;font-size:14px;font-weight:bold;" >月日历:
        </span>
         <span id="span_right_time_02"  style="color:#c3e2ff;font-size:14px;font-weight:bold;" >
   </span>
    <!--$dp.$('span_right_time_02')-->
    <img src="icon_rxuanzeqi.png" onclick="WdatePicker({el:$dp.$('span_right_time_02'),dateFmt:'yyyy-MM'})"/>   </div>   
    </body>
</html>

 

demo先简单获取了当前的月份日期，并将值初始化到对应的div中，点击图标后则触发日历插件修改日期。

最后demo源码资源地址：

链接：https://pan.baidu.com/s/1dGewl4

密码：uxp9

 

posted @ 2018-01-12 15:26  呜呼~厉害了  阅读(286)  评论(0)  编辑  收藏  举报