您好,登錄后才能下訂單哦!
bootstrap-daterangepicker點(diǎn)擊下載
需要bootstrap跟jquery的支持。
實(shí)例代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="all" href="daterangepicker/daterangepicker.css" rel="external nofollow" /> </head> <body> <form class="form-inline"> <div id="divDateId" class="pull-left dateRange"> <input class="form-control" id="searchDate"></input> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> </div> </form> </body> <script type="text/javascript" src="jquery/1.12.4/jquery.min.js" ></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script> <script type="text/javascript" src="daterangepicker/moment.min.js" ></script> <script type="text/javascript" src="daterangepicker/daterangepicker.js" ></script> <script type="text/javascript"> //默認(rèn)三十天 $('#divDateId input').val(moment().subtract('days', 29).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD')); $('#divDateId').daterangepicker({ minDate: '01/01/2015', //最小時(shí)間 maxDate : moment(), //最大時(shí)間 dateLimit : { days : 365*5 }, //起止時(shí)間的最大間隔 showDropdowns : true, showWeekNumbers : false, //是否顯示第幾周 timePicker : false, //是否顯示小時(shí)和分鐘 timePickerIncrement : 60, //時(shí)間的增量,單位為分鐘 timePicker12Hour : false, //是否使用12小時(shí)制來顯示時(shí)間 ranges : { //'最近1小時(shí)': [moment().subtract('hours',1), moment()], '今日': [moment().startOf('day'), moment()], '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近7日': [moment().subtract('days', 6), moment()], '最近30日': [moment().subtract('days', 29), moment()] }, opens : 'right', //日期選擇框的彈出位置 buttonClasses : [ 'btn btn-default' ], applyClass : 'btn-small btn-primary blue', cancelClass : 'btn-small', format : 'YYYY-MM-DD', //控件中from和to 顯示的日期格式 separator : ' to ', locale : { applyLabel : '確定', cancelLabel : '取消', fromLabel : '起始時(shí)間', toLabel : '結(jié)束時(shí)間', customRangeLabel : '自定義', daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ], monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], firstDay : 1 } //漢化日期控件 }, function(start, end, label) { //格式化日期顯示框 $('#searchDate').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')); }); </script> </html>
實(shí)例圖片:
參數(shù)說明:
`startDate`: (Date object, moment object or string) 起始時(shí)間 `endDate`: (Date object, moment object or string) 結(jié)束時(shí)間 `minDate`: (Date object, moment object or string) 可選最早時(shí)間 `maxDate`: (Date object, moment object or string) 可選最遲時(shí)間 `timePicker`: (boolean) 是否顯示time選擇 `timePickerIncrement`: (number) time選擇遞增數(shù) `timePicker12Hour`: (boolean) 是否12小時(shí)制 `opens`: (string: 'left'/'right') 顯示在元素左邊還是右邊 `buttonClasses`: (array) 按鈕樣式 `applyClass`: (string) 應(yīng)用按鈕樣式 `cancelClass`: (string) 取消按鈕樣式 `format`: (string) date/time格式 `separator`: (string) 分隔符 `locale`: (object) 本地設(shè)置 `singleDatePicker`: (boolean) 是否是單個(gè)時(shí)間選擇器 `parentEl`: (string) 將控件放到哪個(gè)元素內(nèi),默認(rèn)body
其中有一個(gè)小需求調(diào)整,當(dāng)我們直接使用源碼選擇時(shí),為啦方便用戶操作,控件在下拉選擇月份時(shí),自動(dòng)幫我們刷新啦另一個(gè)控件上的日期,兩個(gè)日期相差都在一個(gè)月,比如我選擇1月到6月時(shí),兩個(gè)日期面板上顯示不上一個(gè)1月,一個(gè)六月,如圖:
如果不需要這種變化,可以修改daterangepicker.js的代碼:
注釋1444行跟1445行,1448跟1449行,不讓它自動(dòng)去改變?nèi)掌诿姘澹?/p>
在注釋掉582行:
這樣就能達(dá)到改變?nèi)掌诓桓淖兠姘宓男Ч玻?/p>
點(diǎn)擊下載項(xiàng)目源碼
以上所示是小編給大家介紹的BootStrap daterangepicker 雙日歷控件,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)的,在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。