daterangepicker的個性化使用技巧

努力的小雨發表於2018-09-08


由於該模板不自動將時間戳新增到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> 




 




























相關文章