Layui 日期时间控件
1、需要加载模块：laydate https://www.layui.com/laydate/ 2、
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" 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>
3、属性：elem
image.png
type:
image.png
//年选择器 laydate.render({ elem: '#test' ,type: 'year' });
//年月选择器 laydate.render({ elem: '#test' ,type: 'month' });
//日期选择器 laydate.render({ elem: '#test' //,type: 'date' //默认，可不填 });
//时间选择器 laydate.render({ elem: '#test' ,type: 'time' });
//日期时间选择器 laydate.render({ elem: '#test' ,type: 'datetime' });
range:范围选择 //年范围选择 laydate.render({ elem: '#test' ,type: 'year' ,range: true //或 range: '~' 来自定义分割字符 });
//年月范围选择 laydate.render({ elem: '#test' ,type: 'month' ,range: true //或 range: '~' 来自定义分割字符 });
//日期范围选择 laydate.render({ elem: '#test' ,range: true //或 range: '~' 来自定义分割字符 });
//时间范围选择 laydate.render({ elem: '#test' ,type: 'time' ,range: true //或 range: '~' 来自定义分割字符 });
//日期时间范围选择 laydate.render({ elem: '#test' ,type: 'datetime' ,range: true //或 range: '~' 来自定义分割字符 });
format 格式
image.png
image.png
value
image.png
image.png
min/max
//日期有效范围只限定在：2017年 laydate.render({ elem: '#test' ,min: '2017-1-1' ,max: '2017-12-31' });
//日期有效范围限定在：过去一周到未来一周 laydate.render({ elem: '#test' ,min: -7 //7天前 ,max: 7 //7天后 });
//日期时间有效范围的设定: laydate.render({ elem: '#test' ,type: 'datetime' ,min: '2017-8-11 12:30:00' ,max: '2017-8-18 12:30:00' });
//时间有效范围设定在: 上午九点半到下午五点半 laydate.render({ elem: '#test' ,type: 'time' ,min: '09:30:00' ,max: '17:30:00' });
trigger 弹出事件
image.png
position
image.png
lang
image.png
theme 主题
image.png
calendar 节日
image.png
mark 标注日子，日程表
image.png
//标注重要日子 var ins1 = laydate.render({ elem: '#test' ,mark: { '0-10-14': '生日' ,'0-12-31': '跨年' //每年12月31日 ,'0-0-10': '工资' //每个月10号 ,'2017-8-15': '' //具体日期 ,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章 ,'2017-8-21': '发布' } ,done: function(value, date){ if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语 ins1.hint('中国人民抗日战争胜利72周年'); } } });
事件
image.png
腾讯云开发者
