layui-laydate时间日历控件使用方法详解


Posted in Javascript onNovember 15, 2018

本文实例为大家分享了laydate时间日历控件的使用方法,供大家参考,具体内容如下

layui-laydate时间日历控件使用方法详解

layui下载地址:http://www.layui.com/

此控件可使用layui或者独立版的layDate,两者初始化有些不同

在 layui 模块中使用layui.code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" rel="external nofollow" media="all">
</head>
<body>
<div class="layui-inline"> <!-- 注意:这一层元素并不是必须的 -->
<input type="text" class="layui-input" id="test1">
</div>
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
});
</script>
</body>
</html>

作为独立组件使用layui.code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用 layDate 独立版</title>
</head>
<body>
<input type="text" id="test1">
<script src="laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({
elem: '#test1' //指定元素
});
</script>
</body>
</html>

详细配置和事件触发,注释写的很清楚了

laydate.render({ 
 elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等(类型:String/DOM,默认值:无必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象)
 ,type: 'year'//year-只提供年列表选择||month-只提供年、月选择||date-可选择:年、月、日。type默认值,一般可不填||time-只提供时、分、秒选择||datetime-可选择:年、月、日、时、分、秒
 ,range: true //或 range: '~' 来自定义分割字符
 ,format: 'yyyy年MM月dd日' //可任意组合 yyyy年MM月dd日 HH时mm分ss秒===2017年08月18日 20时08分08秒,'yyyy/mm/dd'
 ,value: '2018-08-18' //必须遵循format参数设定的格式String,默认值:new Date()
 ,min: '2017-1-1'//min/max - 最小/大范围内的日期时间值 类型:string,默认值:min: '1900-1-1'、max: '2099-12-31'
 ,max: '2017-12-31'
 ,trigger: 'click' // 自定义弹出控件的事件(类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click)-采用click弹出
 ,show: true //默认显示-类型:Boolean,默认值:false;;;;如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件
 ,position: 'static'//类型:String,默认值:absolute (fixed,absolute,static)
 ,zIndex: 99999999//层叠顺序-类型:Number,默认值:66666666一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效
 ,showBottom: false//是否显示底部栏--类型:Boolean,默认值:true如果设置 false,将不会显示控件的底部栏区域
 ,btns: ['clear', 'now', 'confirm']//类型:Array,默认值:['clear', 'now', 'confirm'](显示清空,今天,确认)
 ,lang: 'en'//语言类型:String,默认值:cn--内置了两种语言版本:cn(中文版)、en(国际版,即英文版)
 ,theme: 'grid'//主题-类型:String,默认值:default,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
 ,calendar: true//是否显示公历节日--类型:Boolean,默认值:false
 ,mark: {//标注重要日子--类型:Object,默认值:无
 '0-10-14': '生日'
 ,'0-12-31': '跨年' //每年12月31日
 ,'0-0-10': '工资' //每个月10号
 ,'2017-8-15': '' //具体日期
 ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
 ,'2017-8-21': '发布'
 }
 ,ready: function(date){//控件在打开时触发,回调返回一个参数
 console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 }
 ,change: function(value, date, endDate){//日期时间被切换后的回调
 console.log(value); //得到日期生成的值,如:2017-08-18
 console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
 }
 ,done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。
 console.log(value); //得到日期生成的值,如:2017-08-18
 console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
 }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
js正则表达式的使用详解
Jul 09 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
vue二级路由设置方法
Feb 09 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 #Javascript
layDate插件设置开始和结束时间
Nov 15 #Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 #Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 #Javascript
layDate日期控件使用方法详解
Nov 15 #Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 #Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 #Javascript
You might like
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP中的替代语法简介
2014/08/22 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
vue如何截取字符串
2019/05/06 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
交通事故代理词范文
2015/05/23 职场文书
校友会致辞
2015/07/30 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
java多态注意项小结
2021/10/16 Java/Android
Golang map映射的用法
2022/04/22 Golang