Skip to content

Commit

Permalink
feat:[dateRange,datePicker]支持使用时间区间面板
Browse files Browse the repository at this point in the history
  • Loading branch information
@discreted66
discreted66 committed Jan 21, 2025
1 parent 917e120 commit 6c94197
Show file tree
Hide file tree
Showing 37 changed files with 826 additions and 153 deletions.
282 changes: 253 additions & 29 deletions examples/sites/demos/apis/date-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,37 +185,261 @@ 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',
type: 'function',
defaultValue: '',
desc: {
'zh-CN': '配置部分禁用',
'en-US': 'Configuration section disabled.'
},
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: 'popper-class',
type: 'string',
defaultValue: '',
desc: {
'zh-CN': '为 DateRange 下拉弹框添加的 class 类名',
'en-US': 'Class name added for DateRange.'
},
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': 'Unlink the two date panels in the range selector'
},
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'
}
],
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']
}
]
}
]
}
12 changes: 9 additions & 3 deletions examples/sites/demos/pc/app/date-panel/basic-usage-composition-api.vue
View file
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -19,5 +22,8 @@ const value = ref('')
& > * {
margin-top: 12px;
}
tiny-date-range-picker {
width: 668px;
}
}
</style>
12 changes: 9 additions & 3 deletions examples/sites/demos/pc/app/date-panel/basic-usage.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
13 changes: 9 additions & 4 deletions examples/sites/demos/pc/app/date-panel/basic-usage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
<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">
.demo-date-panel-wrap {
width: 560px;
& > * {
margin-top: 12px;
}
.tiny-date-range-picker {
width: 668px;
}
}
</style>
12 changes: 11 additions & 1 deletion examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ test('[DatePanel] 测试周次序号', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('date-panel#custom-weeks')

// datePanel
// 选择年份月份日期
await page.getByRole('button', { name: '2025 年' }).click()
await page.getByText('2026').click()
Expand All @@ -15,6 +16,15 @@ test('[DatePanel] 测试周次序号', async ({ page }) => {
await expect(page.getByText('17w')).toBeVisible()

// 选择日期
await page.getByText('23', { exact: true }).click()
await page.getByText('23', { exact: true }).first().click()
await expect(page.getByText('-04-23')).toBeVisible()
await expect(page.locator('.value')).toHaveText('2026-04-23')

// dateRange
await page.locator('div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(2)').click()
await expect(page.getByText('12w')).toBeVisible()

await page.getByText('13').nth(1).click()
await page.getByText('17').nth(2).click()
await expect(page.locator('.value1')).toHaveText('[ "2025-02-13", "2025-02-17" ]')
})
Loading

0 comments on commit 6c94197

Please sign in to comment.