首先,我們將這款日期控件下載下來。百度bootstrap-daterangepicker即可。
2
下載下來解壓的文件如圖。
主要文件有
daterangepicker.js
moment.js
bootstrap.min.css
daterangepicker-bs3.css
即兩個js文件,兩個css文件。
3
我們先打開demo看壹下。
這個日歷效果很好,外形也十分美觀。
4
打開demo的代碼,小編就以demo為例,來介紹壹下這款日期控件的用法。
首先,我們可以看到,這裏有壹個input。
然後js中通過id“#reservation”來定位這個input,使它成為壹個日期控件。
激活日期控件的方法很簡單(無參數法)
$('#reservation').daterangepicker();
這樣就可以建立壹個最簡單日期選擇器了。
5
加參數的日歷可以通過自己修改初始化參數來選擇自己要用的日期選擇器。
bootstrap的這款控件還是相當強大的,幾乎可以滿足妳的壹切要求。
在參數的設置下,妳可以得到各種各樣的日期選擇格式
6
具體的參數列表在bootstrap的官網上可以找到,介紹還算清楚。
但壹般用不到那麽多,需要改的壹般就是format、weekStart、startView等。