bootstrap-daterangepicker點(diǎn)擊下載
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的王益網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
需要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 雙日歷控件,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)的,在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前標(biāo)題:BootStrapdaterangepicker雙日歷控件
本文URL:http://bm7419.com/article2/pcsioc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、、虛擬主機(jī)、網(wǎng)站建設(shè)、定制開發(fā)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)