[feature]{datetimepicker}: 新增选择范围功能,支持设置大于等于、小于等于当前日期

BoBoooooo · Oct 27, 2019 · 8146fff · 8146fff
1 parent 615fdef
commit 8146fff
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/components/FormDesigner/GenerateFormItem.vue b/src/components/FormDesigner/GenerateFormItem.vue
@@ -100,7 +100,8 @@
                       :clearable="widget.options.clearable"
                       :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
                       :format="widget.options.format"
-                      :style="{width: widget.options.width}" />
+                      :style="{width: widget.options.width}"
+                      :picker-options="pickerOptions"/>
     </template>
 
     <template v-if="widget.type =='rate'">
@@ -186,7 +187,23 @@ export default {
       dataModel: this.models[this.widget.model],
     };
   },
-
+  computed: {
+    // 日期选择器pickOptions
+    pickerOptions() {
+      const { range } = this.widget.options;
+      if (range != null && range !== '') {
+        return {
+          disabledDate(time) {
+            if (range === 'smaller') {
+              return time.getTime() <= Date.now();
+            }
+            return time.getTime() >= Date.now();
+          },
+        };
+      }
+      return {};
+    },
+  },
   watch: {
     dataModel: {
       deep: true,

diff --git a/src/components/FormDesigner/WidgetConfig.vue b/src/components/FormDesigner/WidgetConfig.vue
@@ -307,6 +307,14 @@
           <el-switch
             v-model="data.options.isRange"
           />
+        </el-form-item>
+           <!-- 日期选择器选择范围 暂时只提供大于当前时间 小于当前时间 -->
+           <el-form-item label="选择范围"
+                      v-if="data.type == 'date'">
+          <el-select v-model="data.options.range" clearable placeholder="暂时只支持跟当前时间比对">
+            <el-option label="小于等于当前日期" value="smaller"></el-option>
+            <el-option label="大于等于当前日期" value="greater"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item
           v-if="data.type == 'date'"