1.下载jquery、下载layui相关js/css
2.页面中引用相关文件
3.html中使用input创建时间控件
4.js中初始化laydate实例
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/layui/layui.js"></script>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body >
<div>
<!-- display:inline 在引用class之后重写样式，同行显示控件 -->
<input type="text" placeholder="yyyy" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_year">
<input type="text" placeholder="yyyy-MM" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_month">
<input type="text" placeholder="yyyy-MM-dd" class="layui-input" style="width: 250px;display:inline;margin-left:15px;" id="laydate_day">
</div>
<script>
layui.use(['laydate'], function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#laydate_day', //指定元素
done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
if(value.length == 10){
alert(value);//默认加载当日数据
}
}
});
//年选择器
laydate.render({
elem: '#laydate_year'
,type: 'year', //指定元素
done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
if(value.length == 4){
alert(value);//默认加载当日数据
}
}
});
//年月选择器
laydate.render({
elem: '#laydate_month'
,type: 'month', //指定元素
done:function(value,date){//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
if(value.length == 7){
alert(value);//默认加载当日数据
}
}
});
});
</script>
</body>
</html>
1601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
