datetimepicker日期插件如何在bootstrap3中使用
本篇文章給大家分享的是有關(guān)datetimepicker日期插件如何在bootstrap3中使用 ，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、華州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為華州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
1.引入css文件
2.引入js文件
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
3.頁面的div
需要注意的點：
1.js參數(shù)解釋，可以自己設(shè)置試一下
$(‘.form_date').datetimepicker({
language: ‘zh-CN',
weekStart: 1,
todayBtn: 1,//顯示為今天的按鈕，0無1有
autoclose: 1,//單擊時間后日歷框是否自動關(guān)閉，1關(guān)閉，0不關(guān)閉
todayHighlight: 1,//今天高亮顯示
startView: 2,//展示的樣式，1小時，2日
minView: 2,//選取到的時間，2天，1小時
forceParse: 0
});2.div必須位于js之前，或者說頁面div在js之前加載
3.div中data-date-format屬性與第二個input的id屬性為一致，這樣在選擇時間后才會賦值，并傳遞給后臺
至此就可以實現(xiàn)日期插件功能了。
但是，我的需求是，1.頁面加載，2.點擊某個按鈕模態(tài)框顯示，并ajax返回結(jié)果集，根據(jù)結(jié)果集來拼接出日期控件的個數(shù)。由于日期控件個數(shù)的不確定性，在試了各種方法之后發(fā)現(xiàn)，頁面上的div不能在點擊按鈕后動態(tài)生成。
只好在頁面最初展示的時候?qū)⑺袛?shù)據(jù)中條數(shù)最多的查詢出來，放在頁面上：(紅色部分為相關(guān)代碼)
int count = 0;
//將查詢結(jié)果做處理，如參數(shù)字典轉(zhuǎn)換
for(Service s:serviceList){
//資質(zhì)字段若不為空，將code轉(zhuǎn)為name
if(null != s.getOutDate() && !"".endsWith(s.getOutDate())){
String[] outDate = s.getOutDate().split(",");
if(outDate.length>count){
count=outDate.length;
}
String outDateString = "";
if(outDate.length>0){
for(int i=0;i并在頁面上使用jstl標(biāo)簽生成div，并都設(shè)成為不可見:
|
ajax查詢后循環(huán)賦值的代碼就不貼了，效果圖如下:(有一個問題是時間選擇框不和時間顯示在一行，如有大神能幫忙解決的話不勝感激！！)
以上就是datetimepicker日期插件如何在bootstrap3中使用 ，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章：datetimepicker日期插件如何在bootstrap3中使用
標(biāo)題網(wǎng)址：http://weahome.cn/article/iipigg.html
重慶分公司
重慶分公司
