文档章节

js实现的日历

KEEP_MOVING
 KEEP_MOVING
发布于 2016/05/18 10:25
字数 1362
阅读 78
收藏 2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!--css-->

<style type="text/css">

.payment{width:532px;float:left;border:solid 1px #bfbfbf;color:#0d0d0d}
.payment .left{float:left;padding:0 15px;width:150px}
.payment .left h2{font-size:16px;line-height:40px}
.payment .left>p{margin-top:20px;line-height:25px}
.payment .left .years{width:63px}
.payment .left .months{width:44px}
.payment .left select{height:25px;border:solid 1px #bfbfbf}
.payment .left>p a{font-size:12px;color:#727272}
.payment .left>p a:hover{color:#f7513f}
.payment .left>p .syy{float:left}
.payment .left>p .syy i{margin-right:3px}
.payment .left>p .xyy{float:right}
.payment .left>p .xyy i{margin-left:3px}
.payment .left .cont{width:130px;padding:0 10px;margin-top:40px;background:#eee;border-radius:6px;padding-bottom:20px}
.payment .left h5{line-height:40px;font-size:14px}
.payment .left .cont p{line-height:20px}
.payment .left .cont a{color:#f7513f;font-size:12px;float:right}
.calendar{float:right;width:350px;height:auto}
.xd-theme-color{color:#01C097}
.xd-font-color2{color:#A0A0A0}
.calendar_on{background-color:#febab8}
.calendar .month{width:100%;font-size:20px;border-radius:8px;margin:0}
.calendar .month .title{height:25px;width:100%;padding:0 10px;display:none}
.calendar .month .week-list{list-style:none;height:40px;width:100%;line-height:40px;float:none;margin:0;background:#bfbfbf}
.calendar .week-list .week{width:14.2857%;text-align:center;float:left;border:none;color:#fff}
.payment .helper{clear:both;width:0;height:0;float:none;border:none}
.calendar .month .month-list{width:100%;list-style:none;float:none;height:218px;border:none;margin:0;background:#eee;border:none;padding:10px 0;overflow:visible;position:relative}
.calendar .month-list .item{width:14.2857%;height:38px;line-height:38px;text-align:center;float:left;border:none;font-size:16px;overflow:visible}
.calendar .item .day{height:28px;width:28px;line-height:28px;display:inline-block;text-align:center;margin:0 auto;border-radius:50%;font-size:16px;color:#3a3a3a;border:none;cursor:default;position:relative}
.calendar .item .calendar_on:hover{background:#fe504d;color:#fff;transition:all .2s ease-out}
.calendar .item .calendar_on:hover .layer{display:block}
.calendar .item .day .layer .arrowup{position:absolute;height:4px;width:8px;left:50%;top:-4px;margin-left:-4px;background:transparent url(../img/icon/arrowup_03.png) left center no-repeat}
.calendar .item .day .layer{display:none;width:290px;padding:10px 15px;position:absolute;left:50%;top:28px;border-radius:6px;margin-left:-160px;background:#fff;box-shadow:0 0 10px #A0A0A0;z-index:99}
.day .layer table{width:100%}
.day .layer thead th,.day .layer thead tr{color:#727272;font-size:12px;font-weight:400;height:auto;padding:5px 0}
.day .layer tbody td,.day .layer tbody tr{font-size:12px;color:#0d0d0d;height:auto;padding:0}
.day .layer tbody td.red{color:#f7533d}
.day .layer table .left{text-align:left;float:none;width:auto}
.day .layer table .right{text-align:right;float:none}

</style>

 

<!--dom-->
                    <div class="payment">
                        <div class="left">
                            <h2>回款日历</h2>
                            <p>
                                <select class="years">
                                    <c:forEach var="year"  begin="${minPaymentYear}" end="${maxPaymentYear}">
                                        <option value="${year}">${year}</option>
                                    </c:forEach>
                                </select>
                                <span>年</span>
                                <select class="months">
                                    <c:forEach var="month"  begin="1" end="12">
                                        <option value="${month}">${month}</option>
                                    </c:forEach>
                                </select>
                                <span>月</span>
                            </p>
                            <p>
                                <a class="syy" href="javaScript://">
                                    <i class="fa fa-caret-left" aria-hidden="true"></i>
                                    上一月
                                </a>
                                <a class="xyy" href="javaScript://">
                                    下一月
                                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                                </a>
                            </p>
                            <div class="helper"></div>
                            <p></p>
                            <div class="cont">
                                <h5>下期回款日</h5>
                                <p>
                                    <c:choose>
                                        <c:when test="${not empty nextPaymentTime}"><span><fmt:formatDate value="${nextPaymentTime}" type="both" pattern='yyyy-MM-dd'/></span><a href="${ctx}/repayementdetail/repaydetail.htm">详情</a></c:when>
                                        <c:otherwise><span>无</span></c:otherwise>
                                    </c:choose>
                                </p>
                            </div>
                        </div>
                        <div class="calendar"></div>
                    </div>

 

<!--template -->

<div class="template" style="display: none;">
        <!--月 id格式:“2015-03” -->
        <div id="" class="month">
            <div class="title xd-theme-color">
                <span class="year-num"></span>年
                <span class="month-num"></span>月
            </div>
            <ul class="week-list">
                <li class="week xd-font-color2">日</li>
                <li class="week">一</li>
                <li class="week">二</li>
                <li class="week">三</li>
                <li class="week">四</li>
                <li class="week">五</li>
                <li class="week xd-font-color2">六</li>
                <li class="helper"></li>
            </ul>
            <ul class="month-list">
    
            </ul>
        </div>        
        <!--空框-->
        <li class="item empty"></li>
        <!--日-->
        <li class="item day-cont">
            <div status="false" class="day">1</div>
        </li>
        <!--辅助元素-->
        <li class="helper"></li>
        <!--弹窗-->
        <div class="layer">
            <div class="arrowup"></div>
            <table border="0" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th width="35%" class="left">回款金额</th>
                        <th width="35%" class="center">所属项目</th>
                        <th width="30%" class="right">状态</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
        </div>
        <table>
            <tr class="data">
                <td class="left"></td>
                <td class="center"></td>
                <td class="right"></td>
            </tr>
        </table>
    </div>

 

<!--js-->

<script type="text/javascript">
    $(function(){
        
        calendarInit(function(year,month){
            //addPayment(6); 
        });
    });
    
    calendarInit = function(func){
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var day = myDate.getDay();
        var theLastMonth = month - 1;
        var nextMonth = month + 1;
        addMonth(year,month);
        document.querySelector(".years").value = year;
        document.querySelector(".months").value = month;
        if(func){func(year,month);}
        
        //选年
        $(".years").change(function(){
            month = $(".months").val();
            year = $(".years").val();
            addMonth(year,month);
            if(func){func(year,month);}
        })
        
        //选月
        $(".months").change(function(){
            month = $(".months").val();
            year = $(".years").val();
            addMonth(year,month);
            if(func){func(year,month);}
        })
        
        //下个月
        $(".syy").bind("click",function(){
            month--;
            if(month == 0){
                year--;
                month = 12;
            }
            document.querySelector(".years").value = year;
            document.querySelector(".months").value = month;
            addMonth(year,month);
            if(func){func(year,month);}
        });
        
        //上个月
        $(".xyy").bind("click",function(){
            month++;
            if(month == 13){
                year++;
                month = 1;
            }
            document.querySelector(".years").value = year;
            document.querySelector(".months").value = month;
            addMonth(year,month);
            if(func){func(year,month);}
        });
        
        //手机端配置    
        if($("body").width() < 749){
            $(".calendar .item .day").bind("click",function(e){
                $(".calendar .item .day .layer").hide();
                $(this).find(".layer").show();
                e.stopPropagation();
            })
            $(".calendar").bind("click",function(){
                $(this).find(".layer").hide();
            })
        }
        
        //添加月份
        function addMonth(year,month){
            var firstDay = year+"-"+month+"-"+"1";
            var monthNode = document.querySelector(".template .month");
            var dayNode = document.querySelector(".template .day-cont");
            var emptyNode = document.querySelector(".template .empty");
            var helperNode = document.querySelector(".template .helper");
            var newMonthNode = monthNode.cloneNode(true);
            var newHelperNode = helperNode.cloneNode(true);
            var monthId = year + "-" + ((month<10)?("0"+month):month);
            newMonthNode.setAttribute("id",monthId);
            newMonthNode.querySelector(".month-num").textContent = month;
            newMonthNode.querySelector(".year-num").textContent = year;
            for( var i = 1 ; i <= getWeekDay(firstDay) ; i++ ){
                var newEmptyNode = emptyNode.cloneNode(true);
                newMonthNode.querySelector(".month-list").appendChild(newEmptyNode);
            }
            for( var i = 1 ; i <= monthDays(year,month) ; i++ ){
                var newDayNode = dayNode.cloneNode(true);
                newDayNode.querySelector(".day").textContent = i;
                newMonthNode.querySelector(".month-list").appendChild(newDayNode);
            }
            newMonthNode.querySelector(".month-list").appendChild(newHelperNode);
            document.querySelector(".calendar").innerHTML = "";
            document.querySelector(".calendar").appendChild(newMonthNode);

            $.ajax({
                 type:'get',
                 cache: false,
                 url:'${ctx}/borrowInvest/queryPaymentTime.htm',
                 data:{"monthId" : monthId},
                 dataType : "json",
                 success:function(data){
                     addPayment(data);
                 }
            });
        }
        
        function addPayment(datas){
             if(datas.tag=='0'){
                 window.location.href="${ctx}/login/login.htm?view=true";
             }else{
                 for(var i = 0; i<datas.result.length; i++){
                     if(typeof(datas.result[i].productName) == "undefined"){
                         datas.result[i].productName = datas.result[i].productId;
                     }
                     var num = datas.result[i].sortOrder;
                     var money = datas.result[i].capital;
                     var productName = datas.result[i].productName;
                     var status = datas.result[i].status;
                     if($(".month-list .day").eq(num-1).find('.layer').length == 0){
                          var layerClone = $(".template .layer").clone(true);
                     }
                      var dataDom = $(".template .data");
                      var contDom = layerClone.find("tbody");
                      $(".day").eq(num-1).addClass("calendar_on");
                      var cloneDataDom = dataDom.clone(true);
                      cloneDataDom.find('.left').text("¥"+money);
                      cloneDataDom.find('.center').text(productName);
                      cloneDataDom.find('.right').text("已回款");
                      if(status == 1){
                          cloneDataDom.find('.right').addClass("red");
                          cloneDataDom.find('.right').text("待回款");
                      }
                      contDom.append(cloneDataDom);
                     
                     //配置弹窗位置
                      if($("body").width() < 749){
                         if(parseInt($(".day").eq(num-1)[0].offsetLeft) < 160){
                             layerClone.css({left:"-"+parseInt($(".day").eq(num-1)[0].offsetLeft-4)+"px",marginLeft:"0"});
                             layerClone.find(".arrowup").css({left:parseInt($(".day").eq(num-1)[0].offsetLeft+4)+"px",marginLeft:"0"});
                         }
                      }
                      if(parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-14) < 160){
                         layerClone.css({left:"auto",right:'-'+parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-30)+"px",marginLeft:"0"});
                         layerClone.find(".arrowup").css({left:"auto",right:parseInt($(".month-list").width()-$(".day").eq(num-1)[0].offsetLeft-20)+"px",marginLeft:"0"});
                      }
                      
                      if($(".month-list .day").eq(num-1).find('.layer').length == 0){
                         $(".day").eq(num-1).append(layerClone);
                      }
                 }
             }
        }
        
        function getWeekDay(fullDay){
            var argc= new Array();      
            argc=fullDay.split('-'); 
            var ssdate=new Date(argc[0],parseInt(argc[1]-1),argc[2]);
            return ssdate.getDay();
        }
    
        function monthDays(Year,Month){
            Month--;
            var d = new Date(Year,Month,1);
            d.setDate(d.getDate()+32-d.getDate());
            return (32-d.getDate());
        }
        
    }    
</script>

 

© 著作权归作者所有

KEEP_MOVING
粉丝 3
博文 91
码字总数 17937
作品 0
浦东
私信 提问
微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般...

叶小钗
2018/08/03
0
0
React Native 与原生模块数据通信(一)(iOS)

(一)iOS日历模块封装演示 下面开始演示如何封装一个iOS日历原生模块,让JavaScript可以进行访问到iOS平台日历的功能。 在React Native中,原生模块就是一个Objective-C类,该实现了RCTBridge...

manofit
2018/05/24
0
0
13 个免费和收费的 JavaScript/jQuery 日历

免费的 JavaScript/jQuery 日历 jQuery Frontier Calendar Date Picker Date Range Picker JS Calendar JavaScript Calendar, JSCal2 A CSS styled calendar 收费的 JavaScript/jQuery 日历 ......

红薯
2012/03/10
6.5K
9
一个日历核心算法的实现

上周由于工作需要,要做一个带标注的日历查询的JS程序。到网上也搜了不少日历相关的JS代码,但是发现都比较复杂,完全不适合本次开发的需要,于是乎萌生了自己开发一个日历算法的想法。 虽然...

NILYANG
2009/06/01
712
0
一篇文章吃透iOS、JS的时间日期(Date, Calendar, Locale, TimeZone)

iOS 时间相关类 NSDate - 表示一个绝对的时间点。 NSCalendar - 代表一个特定的日历,例如公历或者希伯来日历。它提供了一系列基于日期的计算,并且可以让你在"NSDate"和"NSDateComponents"对...

奶爸码农
2018/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部