本文主要是介绍layui 时间控件 laydate 的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>
这篇关于layui 时间控件 laydate 的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
