增加TimeRangePicker时间区间范围选择组件 (#2926)

* feat: 增加TimeRangePicker时间范围选择组件 * feat: 增加TimeRangePicker时间范围选择组件2

增加TimeRangePicker时间区间范围选择组件 (#2926)
* feat: 增加TimeRangePicker时间范围选择组件 * feat: 增加TimeRangePicker时间范围选择组件2
沐枫 · GitHub
1 parent 3b0b8d0b
Showing 3 changed files with 22 additions and 1 deletions
src/components/Form/src/componentMap.ts
src/components/Form/src/types/index.ts
src/views/demo/form/index.vue
@@ -65,6 +65,7 @@ componentMap.set(&#39;MonthPicker&#39;, DatePicker.MonthPicker);
 componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
+componentMap.set('TimeRangePicker', TimePicker.TimeRangePicker);
 componentMap.set('StrengthMeter', StrengthMeter);
 componentMap.set('IconPicker', IconPicker);
 componentMap.set('InputCountDown', CountdownInput);
@@ -106,6 +106,7 @@ export type ComponentType =
   | 'RangePicker'
   | 'WeekPicker'
   | 'TimePicker'
+  | 'TimeRangePicker'
   | 'Switch'
   | 'StrengthMeter'
   | 'Upload'
@@ -56,6 +56,7 @@
   </PageWrapper>
 </template>
 <script lang="ts">
+  import { type Recordable } from '@vben/types';
   import { computed, defineComponent, unref, ref } from 'vue';
   import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index';
   import { CollapseContainer } from '/@/components/Container';
@@ -624,10 +625,28 @@
     {
       field: '[startTime, endTime]',
       label: '时间范围',
+      component: 'TimeRangePicker',
+      componentProps: {
+        format: 'HH:mm:ss',
+        placeholder: ['开始时间', '结束时间'],
+      },
+    },
+    {
+      field: '[startDate, endDate]',
+      label: '日期范围',
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        placeholder: ['开始日期', '结束日期'],
+      },
+    },
+    {
+      field: '[startDateTime, endDateTime]',
+      label: '日期时间范围',
       component: 'RangePicker',
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
-        placeholder: ['开始时间', '结束时间'],
+        placeholder: ['开始日期、时间', '结束日期、时间'],
         showTime: { format: 'HH:mm:ss' },
       },
     },