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

随机推荐

python基础数据类型和初级应用
1.整数: int -- 计算和比较 2 -- 10 推位 8421 20 21 -- 2**7 10 - 2 bit_length 二进制的有效占用位数 # 123 # 计算和比较 # 14 0 # ...
layui自定义插件citySelect 省市区三级联动选择
省市区三级菜单联动插件 citySelect.js /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 ...
HTTP协议 django下载安装 url路由分发
今日内容 HTTP协议 MVC和MTV框架模式 django下载安装 django的url路由分发 HTTP协议 http协议请求信息格式 GET / HTTP/1.1 请求行 Host: 127. ...
WordPress网站搬家数据迁移完整教程
用本地环境搭建好的WordPress网站在做好之后如何从本地迁移到网络空间或者网络服务器上呢? 首先请确认你在本地建站的时候只做了themes里面的模版文件,如果只是自己改了下模版,那么网站在搬到服务 ...
python-redis缓存-pool
#连接池 import redis pool=redis.ConnectionPool(host='192.168.71.140', port=6379) r = redis.Redis(connec ...
linux 下如何将网页版应用生成桌面图标
使用linux mint已经两年了,很多国民应用,都没有Linux版,但是这些应用都有网页版,今天就说下最简单的将网页应用变成桌面应用,无需配置,安装任何插件.以微信为例; 首先,在谷歌浏览器打开网页 ...
maven的配置以及使用
1.下载并配置下载之后解压,并配置系统环境变量(网上的方法很多),配置maven的环境变量之前确保java的环境变量已经配置成功. 2.eclipse安装maven插件 eclipse安装maven ...
Mysql主从分离介绍及实现
参考: http://www.cnblogs.com/panxuejun/p/5887118.html https://www.cnblogs.com/alvin_xp/p/4162249.html ...
枚举类型C语言规律用法总结
注:以下全部代码的执行环境为VC++ 6.0 在程序中,可能需要为某些整数定义一个别名,我们可以利用预处理指令#define来完成这项工作,您的代码可能是: #define MON 1#define ...
windows下php配置环境变量
这样重启终端后,通过php -v可查看新使用的php版本信息. 注:在path配置在上方的先生效

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

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

随机推荐

热门专题