1、插件的下载(https://www.layui.com/laydate)

layDate日期与时间组件的使用 随笔 第1张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

2、解压layDate插件,然后复制laydate文件夹内容,粘贴到新建项目的js文件夹下。

 layDate日期与时间组件的使用 随笔 第2张

3、代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>时间插件</title>
<!-- 引入laydate.js文件-->
<script type="text/javascript" src="js/laydate/laydate.js"></script>
</head>
<body>
<!-- 创建input文本框,并给id -->
开始时间:<input id="shijian" type="text" />
</body>
<script>
//执行一个laydate实例
laydate.render({
elem: '#shijian', //指定元素
min: 'new Date()' ,//设定最小日期为当前日期
max: 90, //设置当前日期后最大可选择天数
theme: '#8470FF',//主题显示
type: 'datetime', //选择时间
});

</script>
</html>

4、效果图

选择日期:

layDate日期与时间组件的使用 随笔 第3张

 

 选择时间:

layDate日期与时间组件的使用 随笔 第4张

 

 layDate日期与时间组件的使用 随笔 第5张

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄