Browse Source

营业时间限制

lizhuang 5 years ago
parent
commit
22a6988152
1 changed files with 23 additions and 1 deletions
  1. 23 1
      src/views/doBusiness/index.vue

+ 23 - 1
src/views/doBusiness/index.vue

@@ -21,7 +21,11 @@
                             format='HH:mm'
                             format='HH:mm'
                             value-format='timestamp'
                             value-format='timestamp'
                             @change='setHours'
                             @change='setHours'
+                            @focus="onFocus(item)"
                             placeholder='选择时间范围'
                             placeholder='选择时间范围'
+                            :picker-options="{
+                            selectableRange: '07:00-19:00',                       
+                            }"
                         ></el-time-picker>
                         ></el-time-picker>
                     </div>
                     </div>
                 </template>
                 </template>
@@ -75,7 +79,25 @@ export default {
         isDisabled(date) {
         isDisabled(date) {
             const item = Number(timestamp2String(+date).substr(0, 8))
             const item = Number(timestamp2String(+date).substr(0, 8))
             const now = Number(timestamp2String(+new Date()).substr(0, 8))
             const now = Number(timestamp2String(+new Date()).substr(0, 8))
-            return item < now
+            // 过去的 || 31天之后的
+            return item < now || +date > +new Date() + 2678400000
+        },
+        onFocus(item) {
+            const isToday = item.date == Number(timestamp2String(+new Date()).substr(0, 8))
+            if(!isToday) return
+            const nowHours = new Date().getHours()
+            if(nowHours >= 7) this.disablePick('start')
+            if(nowHours >= 19) this.disablePick('end')
+        },
+        disablePick(p) {
+            const s = p === 'start' ? '.el-time-range-picker .el-time-range-picker__cell:nth-child(1) .el-time-range-picker__body' : '.el-time-range-picker .el-time-range-picker__cell:nth-child(2) .el-time-range-picker__body'
+            this.$nextTick(() => {
+                const el = document.querySelector(s)
+                console.log(el);
+                
+                el.style['pointer-events'] = 'none'
+                el.style['background-color'] = '#f5f6f7'
+            })
         },
         },
         translate() {
         translate() {
             this.content.forEach(el => {
             this.content.forEach(el => {