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

随机推荐

Robot Framework（三）项目实践出现的问题以及解决方法
导航: 1.元素定位失败 2.系统自带的确认弹窗 3.ElementNotVisibleException: Message: element not visible 1.元素定位失败(使用frame ...
TCP 三次握手和四次挥手
TCP 三次握手和四次挥手作为面试会被经常考察的的点,自己复习了一下,总结如下: TCP 三次握手先上图: 所谓三次握手,是指建立一个 TCP 连接时,需要客户端和服务器总共发送 3 个包. 第一 ...
WPF ListView多行显示
//前台 <ListView Margin="14,152,12,74" Name="lvList" SelectionMode="Multip ...
Yii2 常用代码集合
Yii2.0 对数据库查询的一些简单的操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
iOS用contenteditable滚动时，光标不会刷新定位的处理方法
分析 iOS的 wkwebview 在滚动时会暂停许多动画,作为优化解决思路监听滚动事件,利用文档重绘即可刷新动画 ps:因为滚动有惯性,touchmove事件只能监听到手指松开的那一刻,所以只能 ...
直通BAT必考题系列：JVM性能调优的6大步骤，及关键调优参数详解
JVM内存调优对JVM内存的系统级的调优主要的目的是减少GC的频率和Full GC的次数. 1.Full GC 会对整个堆进行整理,包括Young.Tenured和Perm.Full GC因为需要对 ...
jq无限极树结构
//群组树结构$(function () { var params= { "companyId":cmpId }; var loadUrl="/apiv2/classif ...
UltraEdit中的特殊字符
以下特殊字符,可以在替换中用到, ^n--换行 ^t--Tab
8.支撑向量机SVM
1.什么是SVM 下面我们就来介绍一些SVM(Support Vector Machine),首先什么是SVM,它是做什么的?SVM,中文名是支撑向量机,既可以解决分类问题,也可以解决回归问题,我们来 ...
shell 实用脚本2
脚本功能拷贝文件夹及子文件夹内文件到对应的文件结构下 ,且拷贝前先进行备份 #!/bin/sh #create by lizr -- #脚本功能 #覆盖文件前先备份 cfsuffix=$ ...

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

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

随机推荐

热门专题