JS框架_(laydate.js)简单实现日期日历

JavaScript日期与时间组件_laydate.js

日期日历效果：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary_日历日期</title>  <link rel="stylesheet" href="css/laydate.css" /> <script src="js/jquery.min.js"></script> <script src="js/laydate.js"></script> <style type="text/css">  .select-date{font-family:"sta cartman"} </style>  </head> <body><script src="/demos/googlegg.js"></script>  <div class="laydate-box">     <input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" />     <!--添加图片可以写这里 img...... -->     <div class="select-date">         <div class="select-date-header">             <ul class="heade-ul">                 <li class="header-item header-item-one">                     <select name="" id="yearList"></select>                 </li>                 <li class="header-item header-item-two" onselectstart="return false">                     <select name="" id="monthList"></select>                 </li>                 <li class="header-item header-item-three" onselectstart="return false" >                     <span class="reback">回到今天</span>                 </li>             </ul>         </div>         <div class="select-date-body">             <ul class="week-list">                 <li>日</li><li>һ</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>             </ul>             <ul class="day-tabel"></ul>         </div>     </div> </div>  <script>     function getSelectDate(result){         //这里获取选择的日期         console.log(result);     } </script>  <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> </div> </body> </html>

index.html

*{     margin: 0;     padding: 0; } li{     list-style: none; } .icon{     position: absolute;     top: 5px;     right: 5px;     height: 25px;     width: 25px;     background: #fff; } .laydate-box{     height: 34px;     width: 154px;     border: none;     margin: 100px 0 0 200px;         position: relative; } #laydateInput{     outline: none;     display: block;     height: 30px;     width: 150px;     font-size: 16px;     line-height: 30px;     } .select-date{     position: absolute;     left: 0px;     top:35px;     width: 266px;     height: 301px;     border: 1px solid #58abff;     display: none; } .select-date-header{     height: 48px;     border-bottom: 1px solid #58abff; } .heade-ul{     height: 49px; } .header-item{     height: 28px;     float: left;     margin-top: 9px; } .header-item select{     height: 28px; } .header-item-one select{     width: 68px;     margin-left: 10px;     height: 30px;     outline: none; } .header-item-one{     height: 30px; } .header-item-two i{     display: block;     float: left;     height: 28px;     width: 28px;     line-height: 28px;     text-align: center;     cursor: pointer; } .header-item-two i{     display: block;     float: left;     height: 28px;     width: 28px;     line-height: 28px;     text-align: center;     cursor: pointer; } .header-item-two{     border: 1px solid #ccc;     margin-left: 10px; } .header-item-two select{     float: left;     border: none;     outline: none; } .header-item-two i:nth-child(1){     border-right: 1px solid #ccc; } .header-item-two i:nth-child(3){     border-left: 1px solid #ccc; } .header-item-three{     margin-left: 30px;     width: 73px; } .header-item-three span{     display: block;     height: 100%;     border: 1px solid #d8d8d8;     background: #f9f9f9;     line-height: 28px;     text-align: center;     font-size: 14px;     width: 100%;     cursor: pointer; } .header-item-three span:hover{     border-color: #388bff; } .header-item-three span.active{     border-color: #388bff; } .week-list{     height: 35px;     width: 100%;     border-bottom: 1px solid #c8cacc; } .week-list li{     float: left;     height: 35px;     width: 35px;     text-align: center;     line-height: 35px;     font-size: 15px;     margin: 0 1px;     /*font-weight: bold;*/      } .week-list li:nth-child(7){     color:#e02d2d } .week-list li:nth-child(1){     color:#e02d2d } .tabel-line{     height: 35px;     border-bottom: 1px solid #c8cacc; } .tabel-ul{     height: 35px; } .tabel-li{     height: 31px;     width: 31px;     text-align: center;     line-height: 31px;     float: left;     border: 2px solid #fff;     margin: 0 1px; } .tabel-li.preDays{     color: #bfbfbf; } .tabel-li.nextDay{     color: #bfbfbf; } .tabel-li:hover{     border-color: #ffbb00; } .tabel-li.showClick{     border-color: #ffbb00; } .tabel-li.active{     background: #ffbb00;     color: #fff !important;    border-color:#ffbb00; } .tabel-li.weekColor{     color:#e02d2d; }

laydate.css

源代码：传送门

JS日期与时间组件/插件官方演示与讲解：传送门

参考文档：传送门

实现过程

一、设置日期日历位置

.laydate-box{     height: 34px;     width: 154px;     border: none;     margin: 100px 0 0 200px;         position: relative; }

static : 　无特殊定位，对象遵循HTML定位规则  absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框  relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : 　IE5.5及NS6尚不支持此属性

position属性：

二、日期日历

.select-date{     position: absolute;     left: 0px;     top:35px;     width: 266px;     height: 301px;     border: 1px solid #58abff;     display: none; }

border设置 4 个边框的样式：

border-width
border-style
border-color

display 属性规定元素应该生成的框的类型

.select-date-header{     height: 48px;     border-bottom: 1px solid #58abff; }

border-bottom 简写属性把下边框的所有属性设置到一个声明中

border-bottom-width
border-bottom-style
border-bottom-color

//年选择器 laydate.render({   elem: ‘#test2‘   ,type: ‘year‘ }); //年月选择器 laydate.render({   elem: ‘#test3‘   ,type: ‘month‘ }); //时间选择器 laydate.render({   elem: ‘#test4‘   ,type: ‘time‘ }); //时间选择器 laydate.render({   elem: ‘#test5‘   ,type: ‘datetime‘ });

年月日选择器

//日期范围 laydate.render({   elem: ‘#test6‘   ,range: true }); //年范围 laydate.render({   elem: ‘#test7‘   ,type: ‘year‘   ,range: true }); //年月范围 laydate.render({   elem: ‘#test8‘   ,type: ‘month‘   ,range: true }); //时间范围 laydate.render({   elem: ‘#test9‘   ,type: ‘time‘   ,range: true }); //日期时间范围 laydate.render({   elem: ‘#test10‘   ,type: ‘datetime‘   ,range: true });

范围选择

//限定可选日期 var ins22 = laydate.render({   elem: ‘#test-limit1‘   ,min: ‘2016-10-14‘   ,max: ‘2080-10-14‘   ,ready: function(){     ins22.hint(‘日期可选值设定在 <br> 2016-10-14 到 2080-10-14‘);   } }); //前后若干天可选，这里以7天为例 laydate.render({   elem: ‘#test-limit2‘   ,min: -7   ,max: 7 }); //限定可选时间 laydate.render({   elem: ‘#test-limit3‘   ,type: ‘time‘   ,min: ‘09:30:00‘   ,max: ‘17:30:00‘   ,btns: [‘clear‘, ‘confirm‘] });

控制选择日历范围

//自定义格式 laydate.render({   elem: ‘#test11‘   ,format: ‘yyyy年MM月dd日‘ }); laydate.render({   elem: ‘#test12‘   ,format: ‘dd/MM/yyyy‘ }); laydate.render({   elem: ‘#test13‘   ,format: ‘yyyyMM‘ }); laydate.render({   elem: ‘#test14‘   ,type: ‘time‘   ,format: ‘H点M分‘ }); laydate.render({   elem: ‘#test15‘   ,type: ‘month‘   ,range: ‘→‘   ,format: ‘yyyy-MM‘ }); laydate.render({   elem: ‘#test16‘   ,type: ‘datetime‘   ,range: ‘到‘   ,format: ‘yyyy年M月d日H时m分s秒‘ });

自定义格式

//墨绿主题 laydate.render({   elem: ‘#test29‘   ,theme: ‘molv‘ }); //自定义颜色 laydate.render({   elem: ‘#test30‘   ,theme: ‘#393D49‘ }); //格子主题 laydate.render({   elem: ‘#test31‘   ,theme: ‘grid‘ });

日历主题

感谢 layDate 日期与时间组件：传送门

原文：https://www.cnblogs.com/1138720556Gary/p/9371079.html

标签

border

margin

laydate