在Bootstrap開發框架中使用bootstrap-datepicker外掛
阿新 • • 發佈:2018-12-16
在基於Boostrap的Web開發中,往往需要錄入日期內容,基於Boostrap的外掛中,關於日期的錄入可以使用bootstrap-datepicker這個非常不錯的外掛,以替代預設的type=date這種不太友好的日期錄入控制元件,本篇介紹的是我在我的Boostrap開發框架中利用bootstrap-datepicker外掛實現日期的錄入處理。
1、bootstrap-datepicker外掛的介紹
關於bootstrap-datepicker外掛的相關的專案地址如下所示:
使用這個外掛,和其他外掛使用類似,只需要引入對應的JS檔案和CSS樣式即可,如下是該外掛的引用檔案。
<script src="/js/bootstrap-datepicker.js"></script> <script src="/css/bootstrap-datepicker3.min.css"></script>
如果需要使用本地語言,引入語言檔案即可。
<script src="/locales/bootstrap-datepicker.zh-CN.js"></script>
外掛的檔案目錄如下所示
外掛的使用介面效果如下所示
我們在MVC框架中,使用外掛的時候,往往是把對應的CSS和JS,通過打包的方式進行引入,如在C#程式碼裡面BundleConfig.cs的程式碼如下所示
CSS檔案引入如下程式碼所示
JS檔案類似,如下所示。
而我們在開發Boostrap專案的時候,我們可以使用母版的方式引入對應的JS和CSS檔案,在子頁面則不需要再關注這些應用了,這些是基於MVC的Boostrap開發常見的處理,在這裡就不再贅述了。
2、bootstrap-datepicker外掛的專案使用程式碼
初始化bootstrap-datepicker外掛也比較簡單,最簡單的程式碼如下所示。
<input type="text" id="datetimepicker">
$('#datetimepicker').datetimepicker({ format:'yyyy-mm-dd hh:ii' });
或者
<script type="text/javascript"> $(".form_datetime").datetimepicker(); </script>
而一般使用的時候,我們需要設定語言,格式,按鈕等屬性,如下所示
$('.input-daterange input').each(function () { $(this).datepicker({ language: 'zh-CN', //語言 autoclose: true, //選擇後自動關閉 clearBtn: true,//清除按鈕 format: "yyyy-mm-dd"//日期格式 }); });
在查詢資料的介面中,我們一般需要一個區間的時間,如下所示。
而該介面的程式碼如下所示。
<div class="input-group input-daterange"> <input id="WHC_PayDate" name="WHC_PayDate" type="text" placeholder="付款日期(起)" data-date-format="yyyy-mm-dd" class="form-control"/> <div class="input-group-addon">~</div> <input id="WHC_PayDate2" name="WHC_PayDate" type="text" placeholder="付款日期(止)" data-date-format="yyyy-mm-dd" class="form-control"/> </div>
以及錄入介面明細的時候,選擇單個日期的介面如下所示。
$('.input-date input').each(function () { $(this).datepicker({ language: 'zh-CN', //語言 autoclose: true, //選擇後自動關閉 clearBtn: true,//清除按鈕 format: "yyyy-mm-dd"//日期格式 }); });
使用外掛的時候,我們不可能為每個input初始化bootstrap-datepicker外掛,因此使用了類選擇器的處理方式實現所有日期外掛的初始化。
外掛可選的日期格式:
- yyyy-mm-dd
- yyyy-mm-dd hh:ii
- yyyy-mm-ddThh:ii
- yyyy-mm-dd hh:ii:ss
- yyyy-mm-ddThh:ii:ssZ
最後看看整體的介面效果吧。