Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(date-range): [date-panel,date-range,date-picker] DatePicker support using only date range panel #2833

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat(date-range): [date-panel,date-range,date-picker] DatePicker support using only date range panel #2833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
306 changes: 276 additions & 30 deletions examples/sites/demos/apis/date-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default {
pcDemo: 'format'
},
{
name: 'v-model/modelValue',
name: 'v-model / modelValue',
type: 'date | string | number',
defaultValue: '',
desc: {
Expand Down Expand Up @@ -60,6 +60,17 @@ export default {
mode: ['pc'],
pcDemo: 'readonly'
},
{
name: 'shortcuts',
type: 'Array',
defaultValue: '--',
desc: {
'zh-CN': `设置快捷选项`,
'en-US': 'Set shortcut options'
},
mode: ['pc'],
pcDemo: 'shortcuts'
},
{
name: 'show-week-number',
type: 'boolean',
Expand Down Expand Up @@ -185,37 +196,272 @@ 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'
},
discreted66 marked this conversation as resolved.
Show resolved Hide resolved
{
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: 'shortcuts',
type: 'Array',
defaultValue: '--',
desc: {
'zh-CN': `设置快捷选项`,
'en-US': 'Set shortcut options'
},
mode: ['pc'],
pcDemo: 'shortcuts'
},
{
name: 'show-week-number',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否展示周次序号',
'en-US': 'Class name added to the DatePicker drop-down list box'
},
discreted66 marked this conversation as resolved.
Show resolved Hide resolved
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'
}
discreted66 marked this conversation as resolved.
Show resolved Hide resolved
],
format: [
{
name: 'a',
desc: {
'zh-CN': 'am/pm',
'en-US': ''
},
discreted66 marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Open in desktop
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()
})
Loading
Loading