由於該模板不自動將時間戳添加到input中去，始終為NaN，所以，自己選取起始時間與截止時間
var startTime =new Date(new Date().toLocaleDateString()).getTime()/1000;
var endTime = new Date(new Date().toLocaleDateString()).getTime()/1000+(24 * 60 * 60) - 1;
1 datelist = {} //自己創建或者從后台獲取 格式為 （yyyy-MM-dd） 2 //日歷 3 $('.date-picker').daterangepicker({ 4 showDropdowns:true,
timePicker: true, //顯示時鍾
maxDate: moment(new Date()), //設置最大可選日期 5 isCustomDate:function( date ) { //看需求是否需要對樣式進行修改 6 for(var i=0;i<datelist.length;i++){ 7 if(date.format('YYYY-MM-DD') == datelist[i]){ 8 return "in-range"; //有數據的返回淺藍顏色 active為深藍 9 } 10 } 11 return "disabled"; //沒有數據不可選 自己不想也可以return false 12 }, 13 //用來設置默認時間顯示格式,各個按鈕空間的中文顯示 14 locale: { 15 format:'YYYY/MM/DD', 16 applyLabel:'確認', 17 cancelLabel:'取消', 18 fromLabel:'從', 19 toLabel:'到', 20 weekLabel:'W', 21 customRangeLabel:'選擇時間', 22 daysOfWeek:["日","一","二","三","四","五","六"], 23 monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"] 24 } 25 }, function(start, end, label) { 26 startTime=start.unix(); 27 endTime = end.unix(); 28 });
我主要進行對日期數據進行查看使用，有數據的顯示顏色、沒有數據可以不選
更多可以查看官方網站：http://www.daterangepicker.com/#examples
1 里面需要用的是哪個包下載下來引入就行了 2 <link rel="stylesheet" href="daterangepicker.css" /> 3 <script src="/moment.min.js"></script> 4 <script src="daterangepicker.js"></script>
ps:關注一下本人公眾號，每周都有新更新哦！