feat:[dateRange,datePicker]支持使用时间区间面板

opentiny · Jan 21, 2025 · c950f44 · c950f44
1 parent 917e120
commit c950f44
Show file tree

Hide file tree

Showing 37 changed files with 854 additions and 153 deletions.
diff --git a/examples/sites/demos/apis/date-panel.js b/examples/sites/demos/apis/date-panel.js
@@ -185,37 +185,287 @@ export default {
           mode: ['pc']
         }
       ]
-    }
-  ],
-  types: [
-    {
-      name: 'IPickerOptions',
-      type: 'interface',
-      code: `
-interface IPickerOptions {
-  // 每周的第一天是星期几，默认值是7，也就是星期天
-  firstDayOfWeek: number
-  // 实现部分禁用，此时只能选择一部分日期
-  disabledDate: (time: Date) => boolean
-  // 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
-  onPick: (range: { minDate: Date, maxDate: Date }) => void
-  // 快捷选项
-  shortcuts: {
-    text: string
-    onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
-    type: 'startFrom' | 'EndAt'
-    startDate: Date
-    endDate: Date
-  }[]
-}
-      `
     },
     {
-      name: 'IType',
-      type: 'type',
-      code: `
-type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'quarter' | 'year' | 'years' | 'yearrange'
-      `
+      name: 'date-range',
+      type: 'component',
+      props: [
+        {
+          name: 'modelValue / v-model',
+          type: 'Array',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Set the initial value of the calendar component. ;Bound Value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'type',
+          type: 'daterange | datetimerange',
+          defaultValue: 'daterange',
+          desc: {
+            'zh-CN': '时间区间类型',
+            'en-US': 'Range type'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'disabled-date',
+          typeAnchorName: 'disabledDate',
+          type: 'boolean',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '配置部分禁用',
+            'en-US': "Custom selector's rear icon"
+          },
+          mode: ['pc'],
+          pcDemo: 'shortcuts'
+        },
+        {
+          name: 'format',
+          type: 'string',
+          defaultValue: "'yyyy-MM-dd'",
+          desc: {
+            'zh-CN': '显示在输入框中的格式',
+            'en-US': 'Display format in the text box'
+          },
+          mode: ['pc'],
+          pcDemo: 'format'
+        },
+
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: "''",
+          desc: {
+            'zh-CN': '原生属性',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '为 DatePicker 下拉弹框添加的 class 类名',
+            'en-US': 'Cancel the linkage between two date panels in the range selector.'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-suffix-icon'
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置日历组件是否只读',
+            'en-US': 'Set whether the calendar component is read-only.'
+          },
+          mode: ['pc'],
+          pcDemo: 'disabled'
+        },
+        {
+          name: 'show-week-number',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示周次序号',
+            'en-US': 'Class name added to the DatePicker drop-down list box'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-weeks'
+        },
+        {
+          name: 'unlink-panels',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'unlink-panels'
+        }
+      ],
+      events: [
+        {
+          name: 'select-change',
+          type: '(value: Date) => void',
+          desc: {
+            'zh-CN': '用户确认选定的值时触发',
+            'en-US':
+              'This event is triggered when the user confirms the selected value. change (arg1) {//arg1 is the changed date or date set of datepicker}'
+          },
+          mode: ['pc'],
+          pcDemo: 'events'
+        }
+      ],
+      methods: [
+        {
+          name: 'clear',
+          type: '() => void',
+          desc: {
+            'zh-CN': '清除已选中的时间',
+            'en-US': 'Enable input to focus.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        }
+      ],
+      format: [
+        {
+          name: 'a',
+          desc: {
+            'zh-CN': 'am/pm',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'A',
+          desc: {
+            'zh-CN': 'AM/PM',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'd',
+          desc: {
+            'zh-CN': '日，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'dd',
+          desc: {
+            'zh-CN': '日',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'h',
+          desc: {
+            'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用，不补0',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'H',
+          desc: {
+            'zh-CN': '小时，24小时制，不补0',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'hh',
+          desc: {
+            'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'HH',
+          desc: {
+            'zh-CN': '小时，24小时制',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'm',
+          desc: {
+            'zh-CN': '分钟，不补0',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'M',
+          desc: {
+            'zh-CN': '月，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'mm',
+          desc: {
+            'zh-CN': '分钟',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'MM',
+          desc: {
+            'zh-CN': '月',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 's',
+          desc: {
+            'zh-CN': '秒，不补0',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'ss',
+          desc: {
+            'zh-CN': '秒',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'W',
+          desc: {
+            'zh-CN': '周，不补0',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'WW',
+          desc: {
+            'zh-CN': '周',
+            'en-US': ''
+          },
+          mode: ['pc']
+        },
+        {
+          name: 'yyyy',
+          desc: {
+            'zh-CN': '年',
+            'en-US': ''
+          },
+          mode: ['pc']
+        }
+      ]
     }
   ]
 }
diff --git a/examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
@@ -1,15 +1,18 @@
 <template>
   <div class="demo-date-panel-wrap">
-    <div>{{ value }}</div>
+    <div class="value">{{ value }}</div>
     <tiny-date-panel v-model="value"></tiny-date-panel>
+    <div class="value1">{{ value1 }}</div>
+    <tiny-date-range type="daterange" v-model="value1"></tiny-date-range>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { TinyDatePanel } from '@opentiny/vue'
+import { TinyDatePanel, TinyDateRange } from '@opentiny/vue'
 
-const value = ref('')
+const value = ref('2025-01-15')
+const value1 = ref(['2025-01-15', '2025-02-15'])
 </script>
 
 <style scoped lang="less">
@@ -19,5 +22,8 @@ const value = ref('')
   & > * {
     margin-top: 12px;
   }
+  tiny-date-range-picker {
+    width: 668px;
+  }
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts b/examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
@@ -14,9 +14,15 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {
 
   // 选择月份展示日期面板
   await page.getByRole('cell', { name: '一月', exact: true }).click()
-  await expect(page.getByRole('cell', { name: '15' }).locator('div')).toBeVisible()
+  await expect(page.getByRole('cell', { name: '15' }).locator('div').first()).toBeVisible()
 
   // 选择日期
-  await page.getByRole('cell', { name: '15' }).locator('div').click()
-  await expect(page.getByText('-01-15')).toBeVisible()
+  await page.getByText('16').first().click()
+  await expect(page.getByText('-01-16')).toBeVisible()
+
+  // dateRange
+  await page.locator('.tiny-date-range-picker__header > button:nth-child(2)').first().click()
+  await page.locator('div').filter({ hasText: /^19$/ }).nth(1).click()
+  await page.getByRole('cell', { name: '28' }).nth(3).click()
+  await expect(page.getByText('[ "2024-12-19", "2025-01-28" ]')).toBeVisible()
 })