layDate，一款来自layui的强大日期插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jqc874789596/article/details/84578903

layDate特点：

最近发现一款比较好用的日期插件：layDate，由layui开源，作为layui独立维护的三大组件之一，界面美观，性能强悍，易上手，且个性化度高，完美贴合各种业务环境对日期插件的要求。

官方文档地址：

https://www.layui.com/laydate/

官方文档上给出了大量的示例代码，各种使用场景，稍微阅读以下就能上手，本篇文章旨在记录下使用方法及常用的场景。

使用方法：

1. 下载插件 点我下载

获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构） 存放到你项目的任意目录，使用时，只需引入 laydate.js 即可。

以上这句话是引用了官方文档的说明，其实具体使用方法也就是上面所述，这里做个演示。

    2.放置插件

首先把下载好的文件整个拖放到目录中，不要拆分结构。

    3.引用插件

在需要用到该插件的页面引用laydate.js

<script type="text/javascript" src="/js/plugins/layDate-v5.0.9/laydate/laydate.js"></script>

    4.个性化插件（也可以说是初始化插件，在js文件执行时调用这个函数）

function initLayDate(){
	laydate.render({
		elem : '#beginTime', //指定元素
		type : 'datetime',	// 年月日时分秒-格式
		theme: '#393D49',	//自定义主体颜色
		calendar: true	//节日显示
	});
	laydate.render({
		elem : '#endTime', //指定元素
		type : 'datetime',	// 年月日时分秒-格式
		theme: '#393D49',	//自定义主体颜色
		calendar: true	//节日显示
	});
}

laydate封装了轻量级的选择器，所以在使用的时候需要绑定对应标签的id。

因为上面的js代码对两个不同的标签进行了绑定(开始时间、结束时间)，为了更简单明白，我把html代码也放一下（部分）

<div class="form-group">
	<label class="col-sm-3 control-label">起始时间:</label>
	<div class="col-sm-8">
	    <input type="text" name="beginTime" id="beginTime" class="form-control" tabindex="2" style="width: 180px;" readOnly="true"/>
    </div>
</div>
<div class="form-group">
	<label class="col-sm-3 control-label">结束时间:</label>
	<div class="col-sm-8">
	    <input type="text" name="endTime" id="endTime" class="form-control" tabindex="2" style="width: 180px;" readOnly="true"/> 
	</div>
</div>

最终效果图：