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>
 

最終效果圖：