效果图：
参考代码：
<!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>
<div class="layui-input-inline" style="width: 200px;">
<input type="text" name="ny" id="ny" placeholder="选择发放年月" autocomplete="off" class="layui-input date">
</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日' //可任意组合
});
laydate.render({
elem: '#ny' //指定元素
,type: 'month'
,trigger: 'click'
});
});
</script>
</body>
</html>
文章转载自云自由，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
