Selector de hora y fecha
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时间和日期选择器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body style="padding: 20px">
<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="test2" placeholder="yyyy年MM月dd日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="test3"
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="test4"
placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['element', 'jquery', 'laydate'], function () {
var $ = layui.jquery;
var element = layui.element;
var laydate = layui.laydate;
laydate.render({
elem: '#test1' //指定元素
, type: 'date'
, range: "~"
});
laydate.render({
elem: '#test2' //指定元素
, type: 'datetime'
, format: 'yyyy年MM月dd日 HH时mm分ss秒'
});
laydate.render({
elem: '#test3' //指定元素
//,value:'2019-11-11' 指定具体的时间
, value: new Date() //指定当前系统时间
/* ,min:'2019-01-01'
,max:'2025-12-31' */
/* ,min: -7
,max: 7 */
, type: 'time'
, min: '09:30:00'
, max: '17:30:00'
, trigger: 'click'
});
laydate.render({
elem: '#test4' //指定元素
, show: true
, btns: ['confirm']
, lang: 'cn'
, calendar: true,
mark: {
'0-0-15': '工资',
'0-9-1': '开学'
}
});
});
</script>
</body>
</html>
