<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规用法</legend>
</fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">中文版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">国际版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1-1" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>其它选择器</legend>
</fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">年选择器</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2" placeholder="yyyy">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">年月选择器</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">时间选择器</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test4" placeholder="HH:mm:ss">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">日期时间选择器</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
</div>
</div>
<script>
layui.use(‘laydate‘, function(){
var laydate = layui.laydate;
//常规用法
laydate.render({
elem: ‘#test1‘
});
//国际版
laydate.render({
elem: ‘#test1-1‘
,lang: ‘en‘
});
//年选择器
laydate.render({
elem: ‘#test2‘
,type: ‘year‘
});
//年月选择器
laydate.render({
elem: ‘#test3‘
,type: ‘month‘
});
//时间选择器
laydate.render({
elem: ‘#test4‘
,type: ‘time‘
});
//日期时间选择器
laydate.render({
elem: ‘#test5‘
,type: ‘datetime‘
});
});
</script>
</body>
</html>
快速使用:1. 在 layui 模块中使用,下载 layui 后，引入layui.css和layui.js即可,通过layui.use(‘laydate‘, callback)加载模块后，再调用方法
基础参数选项:通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.
类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象
laydate.render({ elem: ‘#test‘ //或 elem: document.getElementById(‘test‘)、elem: lay(‘#test‘) 等 });
类型：String，默认值：date
用于单独提供不同的选择器类型，可选值如下表：
类型：Boolean/String，默认值：false
如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
//常规用法 laydate.render({ elem: ‘#test1‘ ,range: ‘~‘ //或 range: ‘~‘ 来自定义分割字符 }); //国际版 laydate.render({ elem: ‘#test1-1‘ ,lang: ‘en‘ ,range: ‘~‘//或 range: ‘~‘ 来自定义分割字符 }); //年选择器 laydate.render({ elem: ‘#test2‘ ,type: ‘year‘ ,range: ‘~‘ //或 range: ‘~‘ 来自定义分割字符 }); //年月选择器 laydate.render({ elem: ‘#test3‘ ,type: ‘month‘ ,range: ‘~‘ }); //时间选择器 laydate.render({ elem: ‘#test4‘ ,type: ‘time‘ ,range: ‘~‘ }); //日期时间选择器 laydate.render({ elem: ‘#test5‘ ,type: ‘datetime‘ ,range: ‘~‘ });
//自定义格式 laydate.render({ elem: ‘#test11‘ ,format: ‘yyyy年MM月dd日‘ }); laydate.render({ elem: ‘#test12‘ ,format: ‘dd/MM/yyyy‘ }); laydate.render({ elem: ‘#test13‘ ,format: ‘yyyyMMdd‘ }); 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秒
‘
});
类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
<div class="layui-form"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">开启公历节日</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="test17" placeholder="yyyy-MM-dd"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">自定义重要日</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="test18" placeholder="yyyy-MM-dd"> </div> </div> </div> </div>
//开启公历节日 laydate.render({ elem: ‘#test17‘ ,calendar: true }); //自定义重要日 laydate.render({ elem: ‘#test18‘ ,mark: { ‘0-10-14‘: ‘生日‘ ,‘0-12-31‘: ‘跨年‘ //每年的日期 ,‘0-0-10‘: ‘工资‘ //每月某天 ,‘0-0-15‘: ‘月中‘ ,‘2017-8-15‘: ‘‘ //如果为空字符，则默认显示数字+徽章 ,‘2099-10-14‘: ‘呵呵‘ } ,done: function(value, date){ if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语 layer.msg(‘这一天是：中国人民抗日战争胜利72周年‘); } } });
类型：Object，默认值：无
calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：
类型：string，默认值：min: ‘1900-1-1‘、max: ‘2099-12-31‘
设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：
//日期有效范围只限定在：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‘ });
类型：String，默认值：default
我们内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
layui.code //墨绿背景主题 laydate.render({ elem: ‘#test‘ ,theme: ‘molv‘ }); //自定义背景色主题 - 非常实用 laydate.render({ elem: ‘#test‘ ,theme: ‘#393D49‘ }); //格子主题 laydate.render({ elem: ‘#test‘ ,theme: ‘grid‘ });
类型：Boolean，默认值：true
用于控制是否自动向元素填充初始值（需配合 value 参数使用）
laydate.render({ elem: ‘#test‘ ,value: ‘2017-09-10‘ ,isInitValue: false //是否允许填充初始值，默认为 true });
//选中后的回调 laydate.render({ elem: ‘#test20‘ ,done: function(value, date){ layer.alert(‘你选择的日期是：‘ + value + ‘<br>获得的对象是‘ + JSON.stringify(date)); } });
类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click
//自定义事件 laydate.render({ elem: ‘#test24‘ ,trigger: ‘mousedown‘ });
原文：https://www.cnblogs.com/cocobear9/p/13819429.html