一個日曆的控制項，基於vue的，可以日曆區間選擇，可用於酒店日曆區間篩選，動手能力強，可以修改成小程式版本的，先上效果圖 裡面的顏色樣式都是可以修改的 選擇範圍效果 話不多說，直接上乾貨，代碼可以直接複製訪問 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> ...
一個日曆的控制項，基於vue的，可以日曆區間選擇，可用於酒店日曆區間篩選，動手能力強，可以修改成小程式版本的，先上效果圖
裡面的顏色樣式都是可以修改的
選擇範圍效果
話不多說，直接上乾貨，代碼可以直接複製訪問
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> 6 <meta name="renderer" content="webkit"> 7 <title></title> 8 </head> 9 <style> 10 html,body{padding:0;margin:0;height:100%;} 11 .header{ 12 width:100%; 13 height:40px; 14 text-align: center; 15 position: relative; 16 line-height: 40px; 17 } 18 .body{ 19 width: 100%; 20 height:87%; 21 height: -moz-calc(100% - 80px); 22 height: -webkit-calc(100% - 80px); 23 height: calc(100% - 80px); 24 overflow-y: auto; 25 position:absolute; 26 } 27 .golbal-left{ 28 width: 13px; 29 height: 13px; 30 border-top: 2px solid gainsboro; 31 border-right: 2px solid gainsboro; 32 transform: rotate(225deg); 33 -webkit-transform: rotate(225deg); 34 position: absolute; 35 left: 16px; 36 top: 15px; 37 } 38 .calendar { 39 width: 100vw; 40 text-align: center; 41 } 42 .week-title { 43 overflow: hidden; 44 position: fixed; 45 margin-bottom: 1.5rem; 46 background-color: #f6f6f8; 47 z-index: 2; 48 } 49 .week-title>div { 50 width: 14.28vw; 51 height: 2rem; 52 line-height: 2rem; 53 float: left; 54 } 55 .box { 56 position: absolute; 57 top: 2rem; 58 z-index: 1; 59 } 60 .data-title { 61 height: 2rem; 62 line-height: 2rem; 63 border-top: 1px solid #ededed; 64 border-bottom: 1px solid #ededed; 65 clear: both; 66 } 67 .calendar-data { 68 width: 100vw; 69 clear: both; 70 } 71 .day { 72 width: 14.28vw; 73 height: 3rem; 74 line-height: 1.6rem; 75 float: left; 76 display: flex; 77 flex-direction: column; 78 } 79 .day.disabled{ 80 color:#ddd; 81 } 82 .active-start { 83 color: white; 84 background-color: #30b6af; 85 } 86 .active-start::after { 87 content: '入住'; 88 font-size: .5rem; 89 } 90 .active { 91 color: white; 92 background-color: rgba(63,182,175,.5); 93 } 94 .active-end { 95 color: white; 96 background-color: #30b6af; 97 position: relative; 98 } 99 .active-end::after { 100 content: '離開'; 101 font-size: .5rem; 102 } 103 .active-end i{ 104 position: absolute; 105 top:-120%; 106 width:100%; 107 height:100%; 108 background:rgba(0,0,0,1); 109 opacity:0.6; 110 border-radius:8px; 111 display: flex; 112 align-items: center; 113 justify-content: center; 114 font-style: normal; 115 font-size: 15px; 116 color:#fff; 117 } 118 .active-end i::after{ 119 position: absolute; 120 content: ''; 121 float: left; 122 width: 0; 123 height: 0; 124 border-width: 10px; 125 border-style: solid; 126 border-color:#000 transparent transparent transparent; 127 opacity:1; 128 bottom:-20px; 129 left:50%; 130 margin-left:-10px; 131 } 132 .screenbottom{ 133 height:35px; 134 width:100%; 135 display: flex; 136 } 137 .reset{ 138 width:50%; 139 height:40px; 140 line-height: 40px; 141 color:#3E3E3E; 142 text-align: center; 143 background: #fff; 144 } 145 .determine{ 146 width:50%; 147 height:40px; 148 line-height: 40px; 149 background: #48D8BF; 150 color:#fff; 151 text-align: center; 152 } 153 footer{ 154 position: fixed; 155 bottom:0; 156 width:100%; 157 } 158 [v-cloak] 159 { 160 display: none; 161 } 162 </style> 163 <body> 164 <div id='app' v-cloak> 165 <header class="header"> 166 <span>時間範圍</span> 167 </header> 168 <div class="body"> 169 <div class='calendar'> 170 <div class='week-title'> 171 <div>日</div> 172 <div>一</div> 173 <div>二</div> 174 <div>三</div> 175 <div>四</div> 176 <div>五</div> 177 <div>六</div> 178 </div> 179 <div class='box'> 180 <div class='calendar-body'> 181 <div v-for="(item,index) in calendar"> 182 <!-- 標題 --> 183 <div class='data-title'> 184 {{item.fullYear + '年' + item.fullMonth+'月'}} 185 </div> 186 <!-- 日期 --> 187 <div class='calendar-data'> 188 <div class="day" 189 :class="item2.disabled + ' '+ item2.disabled2 + ' ' +item2.start_date + ' ' + item2.end_date +' ' + item2.active_date" 190 v-for="(item2,index) in item.days" 191 @click="selectDate(item2)"> 192 {{item2.day}} 193 </div> 194 </div> 195 </div> 196 </div> 197 </div> 198 </div> 199 </div> 200 <footer> 201 <div class="screenbottom"> 202 <div class="reset">取消</div> 203 <div class="determine">確定</div> 204 </div> 205 </footer> 206 </div> 207 </body> 208 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 209 <script type="text/javascript"> 210 let vm = new Vue({ 211 el:'#app', 212 data:{ 213 start:'', //開始時間。從當天開始。 214 calendar:[], 215 month_length: 6, //最長預定多少個月後的房間 讀取總店配置。 216 max_reserve_days: 0, //最長預定天數。，一個月按30天計劃 217 max_reserve_date: '', //最長可預定的日期。例如：2019-09-12 218 select_start_ymd : '', //入住開始提交時間 例如：2019-5-8 219 select_start_show: '', //入住開始顯示時間 例如：05月08日 220 select_end_ymd: '', //離店開始提交時間 例如：2019-5-8 221 select_end_show: '', //離店開始顯示時間 例如：05月08日 222 select_index:'start', //記錄當前點擊時間，所對應的時間是開始時間還是結束時間 223 select_all_day:'' 224 }, 225 methods:{ 226 initDate:function(){ 227 var _this = this; 228 // 創建時間對象 229 let date = new Date(); 230 //如果當前時間為凌晨6點前。則當前日期往前一天 231 if (date.getHours() < 6) { 232 date = new Date(date.getTime() - 86400 * 1000); 233 } 234 // 獲取完整年月 235 let fullDate = [ 236 date.getFullYear(), 237 date.getMonth() + 1, 238 date.getDate(), 239 date.getFullYear() + '-' + (date.getMonth() + 1) +
