背景：最近整改了一個老專案系統，里面采用的是java+bootstrap+jsp寫的，里面的日歷插件datepicker特別不好用，容易點擊失靈，我決定把它給替換了，
layDate 官網：https://www.layui.com/laydate/
My97DatePicker官網：http://www.my97.net/
這里簡單演示layDate的思路，不展示專案原始碼，僅作為一個Demo，另一個日歷插件My97DatePicker也還行，同樣的道理，
My97DatePicker最新版更新到2017/8/3.這個是我不愿意使用它的原因，不活躍，
下面簡單說一下我使用layDate解決問題的辦法及思路，
入門操作很簡單，有兩種方案，一是使用layui寫，另一個使用獨立包，根據自己的情況使用，我這里展示一下獨立包的使用，
第一步 laydate官網下載安裝包：laydate
解壓并把laydate放到專案中，位置隨便放，參考路徑（可以使用絕對路徑或相對路徑）填對即可
參考官網的例子，這個入門很簡單，官網案例如下，
我的主要問題是，從開始日期-結束日期這種形式，
日期，年月日可以任意選擇的，官網沒有很好的例子，嘗試改欄位組合也不行，同事讓我嘗試使用My97DatePicker，我去My97DatePicker官網看了一下，基本差不多，心想這個layDate搞不定，My97DatePicker肯定也搞不定，經過我在layDate在專案中的反復實踐，終于解決了這個問題，
專案代碼示例如下：
<div id="datapicker">
開始日期：<input id="first——start"/>
<span>-<span>
結束日期：<input id="first——end"/>
</div>由于整個專案很龐大，日歷插件超級多，使用HB-X檢索出來的datapicker很多，每個頁面都需要做筆記記錄ID，第一次我直接定位的是datapicker這個屬性，發現專案中原有的整個日歷樣式都消失了，顯然不行，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>歡迎關注孫叫獸的博客</title>
</head>
<body>
<div id="datapicker">
開始日期：<input id="first——start"/>
<span>-<span>
結束日期：<input id="first——end"/>
</div>
<script src="./js/laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
laydate.render({
elem: '#datapicker'
,type: 'datetime'
,range: '到'
,format: 'yyyy年M月d日H時m分s秒'
});
</script>
</body>
</html>最后定位到first--start屬性就可以完美替換專案中所有的日歷插件啦，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>歡迎關注孫叫獸的博客</title>
</head>
<body>
<div id="datapicker">
開始日期：<input id="first——start"/>
<span>-<span>
結束日期：<input id="first——end"/>
</div>
<script src="./js/laydate/laydate.js"></script> <!-- 改成你的路徑 -->
<script>
laydate.render({
elem: '#first——start'
,type: 'datetime'
,range: '到'
,format: 'yyyy年M月d日H時m分s秒'
});
laydate.render({
elem: '#irst——end'
,type: 'datetime'
,range: '到'
,format: 'yyyy年M月d日H時m分s秒'
});
</script>
</body>
</html>
這樣就完美替換了專案中所有的插件，其他頁面，多個日歷插件同理，這里只演示前端處理的一個思路，僅供參考，至于后臺接受日期的時間可以用jquery實作
例如：
jquery.val()
推薦閱讀：
jquery實體教程
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/213936.html
標籤：其他