layDate,一款來自layui的強大日期外掛
阿新 • • 發佈:2018-12-13
layDate特點:
最近發現一款比較好用的日期外掛:layDate,由layui開源,作為layui獨立維護的三大元件之一,介面美觀,效能強悍,易上手,且個性化度高,完美貼合各種業務環境對日期外掛的要求。
官方文件地址:
https://www.layui.com/laydate/
官方文件上給出了大量的示例程式碼,各種使用場景,稍微閱讀以下就能上手,本篇文章旨在記錄下使用方法及常用的場景。
使用方法:
- 下載外掛 點我下載
獲得 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>
最終效果圖: