Skip to content

Commit e5846f1

Browse files
discreted66discreted66
committed
feat:[dateRange,datePicker]支持使用时间区间面板
1 parent f4fcf7a commit e5846f1

39 files changed

+858
-170
lines changed

‎examples/sites/demos/apis/date-panel.js‎

Lines changed: 277 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default {
77
props: [
88
{
99
name: 'disabled-date',
10-
type: 'function',
10+
type: '() => void',
1111
defaultValue: '',
1212
desc: {
1313
'zh-CN': '配置部分禁用',
@@ -28,7 +28,7 @@ export default {
2828
pcDemo: 'format'
2929
},
3030
{
31-
name: 'v-model/modelValue',
31+
name: 'v-model / modelValue',
3232
type: 'date | string | number',
3333
defaultValue: '',
3434
desc: {
@@ -60,6 +60,17 @@ export default {
6060
mode: ['pc'],
6161
pcDemo: 'readonly'
6262
},
63+
{
64+
name: 'shortcuts',
65+
type: 'Array<T>',
66+
defaultValue: '[]',
67+
desc: {
68+
'zh-CN': `设置快捷选项`,
69+
'en-US': 'Set shortcut options'
70+
},
71+
mode: ['pc'],
72+
pcDemo: 'shortcuts'
73+
},
6374
{
6475
name: 'show-week-number',
6576
type: 'boolean',
@@ -185,37 +196,272 @@ export default {
185196
mode: ['pc']
186197
}
187198
]
188-
}
189-
],
190-
types: [
191-
{
192-
name: 'IPickerOptions',
193-
type: 'interface',
194-
code: `
195-
interface IPickerOptions {
196-
// 每周的第一天是星期几，默认值是7，也就是星期天
197-
firstDayOfWeek: number
198-
// 实现部分禁用，此时只能选择一部分日期
199-
disabledDate: (time: Date) => boolean
200-
// 选中日期后执行的回调，需要与 daterange 或 datetimerange 类型配合使用才生效
201-
onPick: (range: { minDate: Date, maxDate: Date }) => void
202-
// 快捷选项
203-
shortcuts: {
204-
text: string
205-
onClick: (picker: { $emit: (type: string, date: Date) => void }) => void
206-
type: 'startFrom' | 'EndAt'
207-
startDate: Date
208-
endDate: Date
209-
}[]
210-
}
211-
`
212199
},
213200
{
214-
name: 'IType',
215-
type: 'type',
216-
code: `
217-
type IType = 'date' | 'dates' | 'daterange' | 'datetime' | 'datetimerange' | 'week' | 'month' | 'monthrange' | 'quarter' | 'year' | 'years' | 'yearrange'
218-
`
201+
name: 'date-range',
202+
type: 'component',
203+
props: [
204+
{
205+
name: 'modelValue / v-model',
206+
type: 'Array<T>',
207+
defaultValue: '[]',
208+
desc: {
209+
'zh-CN': '绑定值',
210+
'en-US': 'Set the initial value of the calendar component. ;Bound Value'
211+
},
212+
mode: ['pc'],
213+
pcDemo: 'basic-usage'
214+
},
215+
{
216+
name: 'type',
217+
type: 'daterange' | 'datetimerange',
218+
defaultValue: 'daterange',
219+
desc: {
220+
'zh-CN': '时间区间类型',
221+
'en-US': 'Range type'
222+
},
223+
mode: ['pc'],
224+
pcDemo: 'basic-usage'
225+
},
226+
{
227+
name: 'disabled-date',
228+
type: '() => void',
229+
defaultValue: '',
230+
desc: {
231+
'zh-CN': '配置部分禁用',
232+
'en-US': 'Configuration section disabled.'
233+
},
234+
mode: ['pc'],
235+
pcDemo: 'shortcuts'
236+
},
237+
{
238+
name: 'format',
239+
type: 'string',
240+
defaultValue: "'yyyy-MM-dd'",
241+
desc: {
242+
'zh-CN': '显示在输入框中的格式',
243+
'en-US': 'Display format in the text box'
244+
},
245+
mode: ['pc'],
246+
pcDemo: 'format'
247+
},
248+
{
249+
name: 'popper-class',
250+
type: 'string',
251+
defaultValue: '',
252+
desc: {
253+
'zh-CN': '为 DateRange 下拉弹框添加的 class 类名',
254+
'en-US': 'Class name added for DateRange.'
255+
},
256+
mode: ['pc'],
257+
pcDemo: 'custom-suffix-icon'
258+
},
259+
{
260+
name: 'readonly',
261+
type: 'boolean',
262+
defaultValue: 'false',
263+
desc: {
264+
'zh-CN': '设置日历组件是否只读',
265+
'en-US': 'Set whether the calendar component is read-only.'
266+
},
267+
mode: ['pc'],
268+
pcDemo: 'disabled'
269+
},
270+
{
271+
name: 'shortcuts',
272+
type: 'Array<T>',
273+
defaultValue: '--',
274+
desc: {
275+
'zh-CN': `设置快捷选项`,
276+
'en-US': 'Set shortcut options'
277+
},
278+
mode: ['pc'],
279+
pcDemo: 'shortcuts'
280+
},
281+
{
282+
name: 'show-week-number',
283+
type: 'boolean',
284+
defaultValue: 'false',
285+
desc: {
286+
'zh-CN': '是否展示周次序号',
287+
'en-US': 'Class name added to the DatePicker drop-down list box'
288+
},
289+
mode: ['pc'],
290+
pcDemo: 'custom-weeks'
291+
},
292+
{
293+
name: 'unlink-panels',
294+
type: 'boolean',
295+
defaultValue: 'false',
296+
desc: {
297+
'zh-CN': '在范围选择器里取消两个日期面板之间的联动',
298+
'en-US': 'Unlink the two date panels in the range selector'
299+
},
300+
mode: ['pc'],
301+
pcDemo: 'unlink-panels'
302+
}
303+
],
304+
events: [
305+
{
306+
name: 'select-change',
307+
type: '(value: Date) => void',
308+
desc: {
309+
'zh-CN': '用户确认选定的值时触发',
310+
'en-US':
311+
'This event is triggered when the user confirms the selected value. change (arg1) {//arg1 is the changed date or date set of datepicker}'
312+
},
313+
mode: ['pc'],
314+
pcDemo: 'events'
315+
}
316+
],
317+
format: [
318+
{
319+
name: 'a',
320+
desc: {
321+
'zh-CN': 'am/pm',
322+
'en-US': ''
323+
},
324+
mode: ['pc'],
325+
pcDemo: ''
326+
},
327+
{
328+
name: 'A',
329+
desc: {
330+
'zh-CN': 'AM/PM',
331+
'en-US': ''
332+
},
333+
mode: ['pc'],
334+
pcDemo: ''
335+
},
336+
{
337+
name: 'd',
338+
desc: {
339+
'zh-CN': '日，不补0',
340+
'en-US': ''
341+
},
342+
mode: ['pc']
343+
},
344+
{
345+
name: 'dd',
346+
desc: {
347+
'zh-CN': '日',
348+
'en-US': ''
349+
},
350+
mode: ['pc']
351+
},
352+
{
353+
name: 'h',
354+
desc: {
355+
'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用，不补0',
356+
'en-US': ''
357+
},
358+
mode: ['pc'],
359+
pcDemo: ''
360+
},
361+
{
362+
name: 'H',
363+
desc: {
364+
'zh-CN': '小时，24小时制，不补0',
365+
'en-US': ''
366+
},
367+
mode: ['pc'],
368+
pcDemo: ''
369+
},
370+
{
371+
name: 'hh',
372+
desc: {
373+
'zh-CN': '小时，12小时制，需要和 A 或 a 一起使用',
374+
'en-US': ''
375+
},
376+
mode: ['pc'],
377+
pcDemo: ''
378+
},
379+
{
380+
name: 'HH',
381+
desc: {
382+
'zh-CN': '小时，24小时制',
383+
'en-US': ''
384+
},
385+
mode: ['pc'],
386+
pcDemo: ''
387+
},
388+
{
389+
name: 'm',
390+
desc: {
391+
'zh-CN': '分钟，不补0',
392+
'en-US': ''
393+
},
394+
mode: ['pc'],
395+
pcDemo: ''
396+
},
397+
{
398+
name: 'M',
399+
desc: {
400+
'zh-CN': '月，不补0',
401+
'en-US': ''
402+
},
403+
mode: ['pc']
404+
},
405+
{
406+
name: 'mm',
407+
desc: {
408+
'zh-CN': '分钟',
409+
'en-US': ''
410+
},
411+
mode: ['pc'],
412+
pcDemo: ''
413+
},
414+
{
415+
name: 'MM',
416+
desc: {
417+
'zh-CN': '月',
418+
'en-US': ''
419+
},
420+
mode: ['pc']
421+
},
422+
{
423+
name: 's',
424+
desc: {
425+
'zh-CN': '秒，不补0',
426+
'en-US': ''
427+
},
428+
mode: ['pc'],
429+
pcDemo: ''
430+
},
431+
{
432+
name: 'ss',
433+
desc: {
434+
'zh-CN': '秒',
435+
'en-US': ''
436+
},
437+
mode: ['pc'],
438+
pcDemo: ''
439+
},
440+
{
441+
name: 'W',
442+
desc: {
443+
'zh-CN': '周，不补0',
444+
'en-US': ''
445+
},
446+
mode: ['pc']
447+
},
448+
{
449+
name: 'WW',
450+
desc: {
451+
'zh-CN': '周',
452+
'en-US': ''
453+
},
454+
mode: ['pc']
455+
},
456+
{
457+
name: 'yyyy',
458+
desc: {
459+
'zh-CN': '年',
460+
'en-US': ''
461+
},
462+
mode: ['pc']
463+
}
464+
]
219465
}
220466
]
221467
}

‎examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<template>
22
<div class="demo-date-panel-wrap">
3-
<div>{{ value }}</div>
3+
<div class="value">{{ value }}</div>
44
<tiny-date-panel v-model="value"></tiny-date-panel>
5+
<div class="value1">{{ value1 }}</div>
6+
<tiny-date-range type="daterange" v-model="value1"></tiny-date-range>
57
</div>
68
</template>
79

810
<script setup>
911
import { ref } from 'vue'
10-
import { TinyDatePanel } from '@opentiny/vue'
12+
import { TinyDatePanel, TinyDateRange } from '@opentiny/vue'
1113
12-
const value = ref('')
14+
const value = ref('2025-01-15')
15+
const value1 = ref(['2025-01-15', '2025-02-15'])
1316
</script>
1417

1518
<style scoped lang="less">
@@ -19,5 +22,8 @@ const value = ref('')
1922
& > * {
2023
margin-top: 12px;
2124
}
25+
tiny-date-range-picker {
26+
width: 668px;
27+
}
2228
}
2329
</style>

‎examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,15 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {
1414

1515
// 选择月份展示日期面板
1616
await page.getByRole('cell', { name: '一月', exact: true }).click()
17-
await expect(page.getByRole('cell', { name: '15' }).locator('div')).toBeVisible()
17+
await expect(page.getByRole('cell', { name: '15' }).locator('div').first()).toBeVisible()
1818

1919
// 选择日期
20-
await page.getByRole('cell', { name: '15' }).locator('div').click()
21-
await expect(page.getByText('-01-15')).toBeVisible()
20+
await page.getByText('16').first().click()
21+
await expect(page.getByText('-01-16')).toBeVisible()
22+
23+
// dateRange
24+
await page.locator('.tiny-date-range-picker__header > button:nth-child(2)').first().click()
25+
await page.locator('div').filter({ hasText: /^19$/ }).nth(1).click()
26+
await page.getByRole('cell', { name: '28' }).nth(3).click()
27+
await expect(page.getByText('[ "2024-12-19", "2025-01-28" ]')).toBeVisible()
2228
})

0 commit comments

Comments
 (0)