bootstrap datepicker限定可選時間范圍實現(xiàn)方法
更新時間：2016年09月28日 10:42:42 作者：弓長步又
這篇文章主要介紹了bootstrap datepicker限定可選時間范圍的實現(xiàn)方法，本文涉及到相關知識點，通過實例給大家介紹的非常詳細,需要的朋友可以參考下
一、應用場景
實際應用中可能會根據(jù)日期字段查詢某個日期范圍內(nèi)的數(shù)據(jù)，則需要對日期選擇器可選時間進行限制，
如：開始時間不能大于結束時間，結束時間不能小于開始時間，此時就要為開始日期選擇器和結束日期選擇器動態(tài)的設置startDate和endDate的值。
二、相關知識點
1、bootstrap-datepicker的初始化
引入bootstrap-datepicker.js和bootstrap-datepicker.css
bootstrap-datepicker配置參數(shù)的了解
2、boostrap-datepicker的changeDate事件：日期改變時觸發(fā)
3、bootstrap-datepicker的setEndDate和setStartDate方法
4、詳細配置參見官方文檔 http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html
三、應用實例
1、JSP中，聲明日期選擇器
<span style="font-size:14px;"><div class="col-md-6 cy-text-right-md"> <div class="form-inline"> <div class="form-group cy-mar-ver-s"> <span class="cy-pad-hor-s">最后接入時間</span> </div> <div class="input-daterange input-group" id="datepicker"> <input type="text" class="form-control" name="start" id="qBeginTime" /> <span class="input-group-addon">至</span> <input type="text" class="form-control" name="end" id="qEndTime" /> </div> <div class="form-group cy-mar-ver-s"> <button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button> </div> </div> </div></span>
2、JS中，對日期選擇器進行初始化和配置
<span style="font-size:14px;"> //開始時間：
$('#qBeginTime').datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date()
}).on('changeDate',function(e){
var startTime = e.date;
$('#qEndTime').datepicker('setStartDate',startTime);
});
//結束時間：
$('#qEndTime').datepicker({
todayBtn : "linked",
autoclose : true,
todayHighlight : true,
endDate : new Date()
}).on('changeDate',function(e){
var endTime = e.date;
$('#qBeginTime').datepicker('setEndDate',endTime);
});</span>
3、效果圖
以上所述是小編給大家介紹的bootstrap datepicker限定可選時間范圍實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關文章
原生JS 左右箭頭選擇日期,就是用左右尖括號可改變中間日期的值，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
微信小程序數(shù)據(jù)分析之自定義分析的實現(xiàn)
這篇文章主要介紹了微信小程序數(shù)據(jù)分析之自定義分析的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了深入理解 ES6中的 Reflect用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了JS實現(xiàn)一個按鈕的方法,實例分析了使用js實現(xiàn)一個按鈕的功能與相關技巧,需要的朋友可以參考下2015-02-02
JavaScript中各種編碼解碼函數(shù)的區(qū)別和注意事項
JavaScript 中encodeURI,encodeURIComponent與escape的區(qū)別和注2010-08-08
匿名函數(shù)可以有效控制變量作用域，構造閉包 (Closure)，防止對全局變量造成污染。在 JavaScript 中，編寫匿名函數(shù)，有以下幾種方法.2010-02-02
這篇文章主要介紹了js兼容火狐顯示上傳圖片預覽效果的方法,涉及js調(diào)用FileReader實現(xiàn)圖片預覽功能的技巧,需要的朋友可以參考下2015-05-05
javascript對JSON數(shù)據(jù)排序的3個例子
這篇文章主要介紹了javascript對JSON數(shù)據(jù)排序的3個例子的相關資料2014-04-04
JavaScript實現(xiàn)電話號碼格式化的解法小結
在 JavaScript 編程中,經(jīng)常會遇到將給定數(shù)據(jù)轉(zhuǎn)換為特定格式的問題,本文為大家整理了一些常用方法,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要為大家詳細介紹了js倒計時簡單實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08