LayUI组件使用-日期与时间选择
2021-08-20 本文已影响0人
让你变好的过程从来都不会很舒服
一、LayUI日期与时间选择
全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。
模块加载名称：laydate，独立版本：http://www.layui.com/laydate/
和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照你的实际需求来选择。
示例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期与时间选择</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test3">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test4">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test5">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test6">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test7">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test8">
</div>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test9">
</div>
<script type="text/javascript">
layui.use("laydate",function(){
var laydate = layui.laydate;
laydate.render({
elem:'#test1', // 绑定id为test1的元素
});
laydate.render({
elem:'#test2', // 绑定id为test2的元素
type: 'year' // 年选择器
});
laydate.render({
elem:'#test3', // 绑定id为test3的元素
type: 'month' // 年月选择器
});
laydate.render({
elem:'#test4', // 绑定id为test4的元素
type: 'date' // 日期选择器
});
laydate.render({
elem:'#test5', // 绑定id为test5的元素
type: 'time' // 时间选择器
});
laydate.render({
elem:'#test6', // 绑定id为test6的元素
type: 'datetime' // 日期时间选择器
});
laydate.render({
elem:'#test7', // 绑定id为test7的元素
format: 'yyyy年MM月dd日' //可任意组合
});
});
</script>
</body>
</html>
