利用JS实现简单的日期选择插件

前端之家收集整理的这篇文章主要介绍了利用JS实现简单的日期选择插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先是调用方法如下

调用方法,后面回调函数返回的是当前选择的日期 calender('#calend').init(function(date){ this.innerHTML = date });
函数 //下面是format格式化显示格式类型,有如下几种: //yyyy为年数 //大写M为月数 //d为几号 //h为小时 //小写m为分钟 //s为秒数 //q为季度 //小写e,为数字星期格式 //大写E,为中文星期格式 //举例:'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E' //注意:以上获取时间如果是个位数则返回个位数,比如7月,则返回7,如果需要返回07,参数可以写成这样“MM”,其它同理,由于时分秒功能还没有添加,默认获取当前时分秒 calender('#calend').init({ date : [2015,12,12],//设置默认显示年月日,默认当前年月日 format : 'yyyy-MM-dd',//设置显示格式 button : false //是否显示按钮 left : 0,//追加left,默认0 top :0,//追加top,默认0 onload : function(){ } //初始化完成执行,this为当前创建的日历对象 },function(date){ //回调函数 this.innerHTML = date });

主要css样式

Box-shadow:0 5px 10px rgba(0,0.2); border-radius:4px; position:relative; font-family:"Microsoft yahei"; position:absolute; z-index:1000 } .calender-wrap { border:1px solid #e2e2e2 } .calender-wrap:after { content:''; display:inline-block; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #eee; border-top:0; border-bottom-color:#d7d7d7; position:absolute; left:9px; top:-7px } .calender-wrap:before { content:''; display:inline-block; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #ffffff; border-top:0; position:absolute; left:10px; top:-6px; z-index:10 } .calender-caption { height:35px; border-bottom:1px solid #ddd; z-index:2; background:#eee } .calender-content { position:relative; overflow:hidden } .calender-content:after { content:''; display:block; clear:both } .calender-cell { cursor:pointer; float:left; width:14.28571428%; height:35px; text-align:center; line-height:35px; font-size:12px; color:#000; z-index:1; border-bottom:1px solid #eee } .calender-cell:hover { background:#eee } .calender-caption .calender-cell:hover { background:none } .calender-cell-dark { cursor:no-drop; color:#b9b9b9 } .calender-caption .calender-cell { height:35px; line-height:35px; font-size:13px; color:#111; font-weight:bold } .calender-header { text-align:center; line-height:35px; text-align:center; color:#888; padding-bottom:4px; margin-bottom:1px; background:#fff; position:relative; border-bottom:1px solid #e6e6e6; font-size:14px } #calender-prev,#calender-next { text-decoration:none; display:block; width:14.2857%; height:35px; background:#fff; position:absolute; left:0%; top:0px; font-family:'宋体'; font-size:14px; color:#555 } #calender-prev,#calender-next { color:#999; font-size:16px } #calender-prev:hover,#calender-next:hover { background:#eee; border-radius:5px; color:#222 } #calender-next { left:auto; right:0% } #calender-year,#calender-mon { cursor:pointer; padding:2px 4px; border-radius: 3px; margin:0 3px; } #calender-year:hover,#calender-mon:hover { background:#eee } .calender-list { overflow:hidden } .calender-list2,.calender-list3 { display:none } .calender-year-cell,.calender-mon-cell { width:32.41%; float:left; border-radius:4px; text-align:center; font-size:12px; padding:15px 0; border:1px solid #fff } .calender-year-cell:hover,.calender-mon-cell:hover { background:#eee; cursor:pointer } .calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active { background:#23acf1; color:#fff } .calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover { background:#23acf1; color:#fff } .calender-button { border-top:1px solid #eee; width:100%; margin-top:-1px; padding:7px 0px 2px 0; overflow:hidden } .calender-button a { display:block; text-align:center; padding:0px 15px; height: 25px; line-height: 25px; float:right; background:#23acf1; color:#fff; margin-right:5px; cursor:pointer; margin-left:5px; font-size:12px; text-decoration:none } .calender-button a:hover { background:#0084c9 } .calender-wrap.year .calender-list,.calender-wrap.month .calender-list { display:none } .calender-wrap.year .calender-list2 { display:block } .calender-wrap.month .calender-list3 { display:block } @keyframes clafade { 0% { transform:scale(0.95); opacity:0 } 100% { transform:scale(1); opacity:1 } }@-webkit-keyframes clafade { 0% { -webkit-transform:scale(0.95); opacity:0 } 100% { -webkit-transform:scale(1); opacity:1 } } .calend { display: block; width: 180px; line-height: 28px; background: #222; color: #fff; padding: 5px 12px; margin:20px 20px 20px 0; font-size: 14px; }

效果图一(默认参数)

效果图二(显示按钮,设置时间)

完整实例

无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档

<div id="calend" class="calend">选择日期


<div id="calend1" class="calend">选择日期

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

原文链接:https://www.f2er.com/js/42180.html

猜你在找的JavaScript相关文章