Переглянути джерело

日期控件修改日期范围限制

liubei@c-top.com.cn 3 роки тому
батько
коміт
b9208376ed
1 змінених файлів з 21 додано та 9 видалено
  1. 21 9
      src/views/bossDataKanban/index.vue

+ 21 - 9
src/views/bossDataKanban/index.vue

@@ -317,7 +317,8 @@
                         </a-radio-group>
                         <a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
                             :disabled-date="disabledDate"  :allowClear="false" dropdownClassName="range-pick-echart"
-                             @change="changePriceRangeDate" />
+                             @change="changePriceRangeDate" @openChange="onOpenChange"
+                             @calendarChange="onCalendarChange" />
 
                         <div class="chart-container">
                             <div class="chart" ref="chart" v-if="chartPie"></div>
@@ -542,15 +543,26 @@
             calendarPriceRangeChange(date) {
                 this.selectPriceDate = date[0]
             },
+            onOpenChange (status) {
+      // 清空禁用时间段的设置
+      this.selectPriceDate = null
+    },
+    onCalendarChange (dates) {
+      // 获取手动选择的时间段起始值
+      this.selectPriceDate = dates[0]
+    },
             //根据选择的开始时间/结束时间,动态渲染要禁用的日期
             disabledDate(current) {
-                if (this.selectPriceDate) {
-                    let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
-                    return  current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
-                        current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD') 
-                } else {
-                    return current && current > moment().endOf('day')
-                }
+                if (!this.selectPriceDate) return current && current > moment().endOf('day')
+                     return (current && current < moment(this.selectPriceDate).subtract(1, 'M').startOf('day')) || current > moment(this.selectPriceDate).add(1, 'M').endOf('day') || current && current > moment().endOf('day')
+                // if (this.selectPriceDate) {
+                //     let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
+                //     return  current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
+                //         current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')  
+                // } else {
+                    
+                //     return   current && current > moment().endOf('day')
+                // }
 
             },
 
@@ -752,7 +764,7 @@
                         itemGap: 20,
                         itemWidth: 15,
                         itemHeight: 10,
-                        padding: [-40, 0, 0, 80],
+                        padding: [-45, 0, 0, 80],
                         bottom: '55%',
                         formatter: function (name) {  //该函数用于设置图例显示后的百分比
                             var data = list