日期時間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)
更新時間：2017年09月14日 09:08:43 投稿：jingxian
下面小編就為大家?guī)硪黄掌跁r間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
分享說明：
項目中要使用日期時間范圍選擇對數(shù)據(jù)進行篩選；精確到年月日 時分秒；起初,使用了layui的時間日期選擇插件；但是在IIE8第一次點擊會報設(shè)置格式錯誤；研究了很久沒解決，但能確定不是layui的問題；因為自己寫的demo可以在IE8運行；只是在我的項目環(huán)境下某些代碼沖突了；所以換用了bootstrap插件daterangepicker；看了很多資料;結(jié)合官網(wǎng)了文檔；基本算是搞定了；把我的總結(jié)代碼分享給大家；希望對使用daterangepicker插件的初學(xué)者有幫助。
總結(jié)分為四個部分：日期范圍選擇實現(xiàn)，日期時間選擇，使用兩個單日歷實現(xiàn)范圍選擇，使用div代替input實現(xiàn)日期時間選擇；下面是代碼
css 代碼
<style type="text/css">
body,
ul,
p,
h3,
img,
input {
margin: 0;
padding: 0;
}
.box {
display: block;
text-align: center;
margin: 20px auto;
}
input {
width: 400px;
height: 40px;
}
label {
display: inline-block;
width: 90px;
line-height: 40px;
height: 40px;
margin: 0;
font-weight: normal;
font-family: "宋體";
background-color: #ddd;
}
.divDateSelect{
width: 185px;
height: 50px;
line-height: 50px;
margin:10px auto;
border:2px solid #ddd;
border-radius: 5px;
}
</style>
html代碼:
<!-- 日期時間范圍選擇代碼 --> <div class="box"> <label for="datePicker">雙日歷</label> <input type="text" name="datePicker" class="datePicker" id="datePicker"> </div> <!-- 日期時間選擇代碼 --> <div class="box"> <label for="singledatePicker">單日歷</label> <input type="text" name="singledatePicker" class="singledatePicker" id="singledatePicker"> </div> <!-- 兩個單日歷實現(xiàn)日期時間范圍選擇代碼 --> <div class="box"> <label for="from">從</label> <input type="text" name="from" class="from" id="from"> <label for="to">到</label> <input type="text" name="to" class="to" id="to"> </div> <!-- 不使用input,用div實現(xiàn)代碼 --> <div class="divDateSelect" id="divDateSelect"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span></span> <b class="caret"></b> </div>
js 代碼，按照上下順序?qū)?yīng)html四部分
$('input[name="datePicker"]').daterangepicker({
timePicker: true, //顯示時間
timePicker24Hour: true, //時間制
timePickerSeconds: true, //時間顯示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
endDate: moment(new Date()), //設(shè)置結(jié)束器日期
maxDate: moment(new Date()), //設(shè)置最大日期
"opens": "center",
ranges: {
// '今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'上周': [moment().subtract(6, 'days'), moment()],
'前30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
applyLabel: '確定', //確定按鈕文本
cancelLabel: '取消', //取消按鈕文本
customRangeLabel: '自定義',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(start, end, label) {
timeRangeChange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
console.log(timeRangeChange);
});
$('input[name="singledatePicker"]').daterangepicker({
"autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
singleDatePicker: true, //單日歷
showDropdowns: true, //年月份下拉框
timePicker: true, //顯示時間
timePicker24Hour: true, //時間制
timePickerSeconds: true, //時間顯示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
maxDate: moment(new Date()), //設(shè)置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
applyLabel: '確定', //確定按鈕文本
cancelLabel: '取消', //取消按鈕文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(start) {
console.log(start.format('YYYY-MM-DD HH:mm:ss'));
});
var minDate = null;
var max = null;
function fromDate(maxDate) {
if(!maxDate){
max = moment(new Date())
}else{
max = maxDate;
}
$('input[name="from"]').daterangepicker({
"autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
singleDatePicker: true, //單日歷
showDropdowns: true, //年月份下拉框
timePicker: true, //顯示時間
timePicker24Hour: true, //時間制
timePickerSeconds: true, //時間顯示到秒
// startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
maxDate: max , //設(shè)置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
applyLabel: '確定', //確定按鈕文本
cancelLabel: '取消', //取消按鈕文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(s) {
toDate(s);
});
}
fromDate()
function toDate(minDate) {
$('input[name="to"]').daterangepicker({
"autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
singleDatePicker: true, //單日歷
showDropdowns: true, //年月份下拉框
timePicker: true, //顯示時間
timePicker24Hour: true, //時間制
timePickerSeconds: true, //時間顯示到秒
// startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
maxDate: moment(new Date()), //設(shè)置最大日期
minDate: minDate,
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
applyLabel: '確定', //確定按鈕文本
cancelLabel: '取消', //取消按鈕文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, function(s) {
fromDate(s)
});
}
toDate();
var start = moment(new Date());
function cb(start) {
$('#divDateSelect span').html(start.format('YYYY-MM-DD HH:mm:ss'));
}
$('#divDateSelect').daterangepicker({
"autoApply": true, //選擇日期后自動提交;只有在不顯示時間的時候起作用timePicker:false
singleDatePicker: true, //單日歷
showDropdowns: true, //年月份下拉框
// timePicker: true, //顯示時間
timePicker24Hour: true, //時間制
timePickerSeconds: true, //時間顯示到秒
startDate: moment().hours(0).minutes(0).seconds(0), //設(shè)置開始日期
maxDate: moment(new Date()), //設(shè)置最大日期
"opens": "center",
showWeekNumbers: true,
locale: {
format: "YYYY-MM-DD HH:mm:ss", //設(shè)置顯示格式
applyLabel: '確定', //確定按鈕文本
cancelLabel: '取消', //取消按鈕文本
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
}, cb);
cb(start);
效果圖:
第一部分:
第二部分:
第三部分就是兩個第二部分組實現(xiàn)第一部分的效果;原理為在確定好開始日期后;設(shè)置選擇結(jié)束日期日歷的最小選擇日期;在結(jié)束日期選中后;設(shè)置開始日期的最大選擇日期;
第四部分:
關(guān)鍵選項的含義已經(jīng)在代碼中注釋了;引入文件css包括bootstrap的css文件;daterangepicker的css文件;js包括jquery的js;bootstrap的js;daterangepicker的js以及moment.js;
備注：
1 moment.js使用了數(shù)組的indexOf()方法;但IE8不支持;需要引入兼容代碼;代碼地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf 在polyfill下;
2 在IE8下;雙日歷的范圍選擇出現(xiàn)連個日歷豎直排列問題;解決方法為給存放兩個日歷的盒子設(shè)置固定的寬度,足以放下兩個日歷的div;再把兩個日歷的div設(shè)置float:left即可;
3 官網(wǎng)地址;選項設(shè)置: http://www.daterangepicker.com/#options
例子: http://www.daterangepicker.com/#examples
4 希望本文能夠幫助初識daterangepicker的朋友.
以上這篇日期時間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天與大家分享一下，自己寫的滑動門。在網(wǎng)上也搜索了一下，沒發(fā)現(xiàn)比較好的，于是乎自己寫一吧~寫起來也很簡單，為了方便使用，我已經(jīng)盡量封裝好了。好吧，閑話少說，直接上代碼吧2012-10-10
這篇文章主要給大家分享了15款jQuery分布引導(dǎo)插件,需要的朋友可以參考下2015-02-02
上周發(fā)布了‘jquery開發(fā)的數(shù)獨游戲’，下載量很多評論的人很少。近期會將主要的開發(fā)思路整理出來與大家交流，非常希望與大家通過這個例子共同探討和學(xué)習(xí)。2010-11-11
這篇文章主要介紹了jquery實現(xiàn)的Banner廣告收縮效果代碼,可實現(xiàn)點擊按鈕收縮與展開廣告圖片的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，重點是EasyUI創(chuàng)建菜單與按鈕，按鈕分為鏈接按鈕、菜單按鈕、分割按鈕，對這方面感興趣的小伙伴們可以參考一下2015-11-11
Query常用DIV操作獲取和設(shè)置長度寬度的實現(xiàn)方法
下面小編就為大家?guī)硪黄猀uery常用DIV操作獲取和設(shè)置長度寬度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery獲取checkboxlist的value值的方法
最近著手一個項目用到了服務(wù)器空間checkboxlist ,使用起來是方便，可以想要從js獲取值就稍微麻煩點了，google后找到了如下方法，感興趣的小伙伴們可以參考一下2015-09-09
jQuery Deferred和Promise創(chuàng)建響應(yīng)式應(yīng)用程序詳細介紹
接下來我們一起探索一下JavaScript中的 Deferred 和 Promise 的概念Deferred 提供了一個抽象的非阻塞的解決方案（如Ajax 請求的響應(yīng)），它創(chuàng)建一個promise對象，其目的是在未來某個時間點返回一個響應(yīng)，感興趣的可以參考下2013-03-03
這篇文章主要介紹了jquery實現(xiàn)仿新浪微博評論滾動效果,基于jquery實現(xiàn)頁面圖文定時滾動效果,涉及jquery頁面元素的遍歷與樣式的動態(tài)操作技巧,是一款經(jīng)典的jquery滾動特效,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jquery 插件重新綁定的處理方法,結(jié)合實例形式分析了jQuery插件解除綁定與重新綁定的具體操作技巧,需要的朋友可以參考下2019-11-11