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

百度云盘　　传送门　　密码:71hf

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>

<div class="laydate-box">

    <input type="text" id="laydateInput" placeholder="xxxx年xx月xx日" />

    <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>

</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 日期与时间组件：传送门

JS框架_(Laydate.js)简单实现日期日历的更多相关文章

JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
JS框架_(JQuery.js)圆形多选菜单选项
百度云盘传送门密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
JS框架_(coolShow.js)图片旋转动画特效
百度云盘传送门密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
JS框架_(Popup.js)3D对话框窗口插件
百度云盘传送门密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘传送门密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式轮播图效果: <!DOCTYPE html> <html> <head&g ...
JS框架_(JQuery.js)文章全屏动画切换
百度云盘传送门密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘传送门密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

随机推荐

F. Greedy Sequence（主席树区间k的后继）（The Preliminary Contest for ICPC Asia Nanjing 2019）
题意: 查找区间k的后继. 思路: 直接主席树. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include <cstdio&g ...
使用history.js解决浏览器对history使用的兼容问题
history.js即可以解决禁止浏览器回退的浏览器兼容问题,也能解决直接修改浏览器当前标签页url的浏览器兼容问题. 解决禁止浏览器回退: <script src="../../js ...
command----常用命令更新ing
common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...
服务器部署Java Web及微信开发调试
参考摘抄: 阿里云部署Java网站和微信开发调试心得技巧(上):https://www.imooc.com/article/20583 阿里云部署Java网站和微信开发调试心得技巧(下):https: ...
js三级内联
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
给Repater增加等号
//不改变数据结构的情况下,增加行号.对Application服务器压力增大,减少DB服务器压力. protected void repShow_ItemDataBound(object sen ...
js获取7天之前的日期或者7天之后的日期
js获取7天之前的日期或者7天之后的日期(网上摘取的,记录自己使用) function fun_date(num) { var date1 = new Date(); //今天时间 var time1 ...
js变量的作用域、变量的提升、函数的提升
变量的作用域在函数之外声明的变量,叫做全局变量,因为它可被当前文档中的任何其他代码所访问.在函数内部声明的变量,叫做局部变量,因为它只能在当前函数的内部访问. ECMAScript 6 之前的 Jav ...
Hadoop伪分布式重启正确流程
既然是伪分布式,那就不可避免的设计到重启Hadoop服务或者重启Hadoop服务器的情况,正确的停止和重启是很有必要的. 首先是Hadoop服务的停止,使用 ./sbin/stop-all.sh脚本来 ...
UITableViewCell背景色.选中背景色,分割线,字体颜色设置
1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

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

JS框架_(Laydate.js)简单实现日期日历的更多相关文章

随机推荐

热门专题