Skip to content

fix(date-picker):fix the init panel width and month name #3466

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

Merged
merged 1 commit into from
Jun 4, 2025
Merged

fix(date-picker):fix the init panel width and month name #3466

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
12 changes: 6 additions & 6 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 @@ -10,18 +10,18 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {

// 选择年份展示月份面板
await page.getByRole('cell', { name: '2025' }).first().click()
await expect(page.getByRole('cell', { name: '一月', exact: true }).first()).toBeVisible()
await expect(page.getByRole('cell', { name: '1 月', exact: true }).first()).toBeVisible()

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

// 选择日期
await page.getByText('16').first().click()
await expect(page.locator('.value')).toHaveText('2025-01-16')

// 月份面板
await page.getByText('七月').first().click()
await page.getByText('7 月').first().click()
await expect(page.locator('.month')).toHaveText('2025-07')

// 年份面板
Expand All @@ -35,9 +35,9 @@ test('[DatePanel] 测试月份/年份/日期选择', async ({ page }) => {
await expect(page.locator('.value1')).toHaveText('[ "2024-12-19", "2024-12-28" ]')

// monthRange
await page.getByText('七月').nth(1).click()
await page.getByText('六月').nth(2).click()
await expect(page.locator('.value2')).toHaveText('[ "2024-07", "2025-06" ]')
await page.locator('#basic-usage').getByText('7 月').nth(1).click()
await page.locator('#basic-usage').getByText('6 月').nth(2).click()
await expect(page.locator('.value2')).toHaveText('[ "2024-03", "2025-02" ]')

// yearRange
await page.getByText('2037').click()
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/date-panel/custom-week.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ test('[DatePanel] 测试周次序号', async ({ page }) => {
// 选择年份月份日期
await page.getByRole('button', { name: '2025 年' }).click()
await page.getByText('2026').click()
await page.getByText('三月').click()
await page.getByText('3 月').click()
await expect(page.getByText('12w')).toBeVisible()

// 选择下个月
Expand Down
17 changes: 8 additions & 9 deletions examples/sites/demos/pc/app/date-panel/disabled-date.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ test('[DatePanel] 测试时间禁用', async ({ page }) => {
.filter({ hasText: /^2025 年6 月$/ })
.getByLabel('前一年')
.click()
await page.getByText('一月', { exact: true }).first().click()
await page.getByText('六月').first().click()
await page.getByText('1 月', { exact: true }).first().click()
await page.getByText('6 月').nth(2).click()
await expect(page.locator('.month')).toHaveText('2024-06')

// 年份面板
Expand All @@ -31,21 +31,20 @@ test('[DatePanel] 测试时间禁用', async ({ page }) => {
// dateRange
await page.locator('.tiny-date-range-picker__header > button').first().click()
await page.getByRole('cell', { name: '16' }).nth(1).click()
await page.locator('div').filter({ hasText: /^18$/ }).nth(2).click()
await page.locator('div').filter({ hasText: /^18$/ }).nth(1).click()
await expect(page.locator('.value1')).toHaveText('[ "2025-01-15", "2025-02-15" ]')

await page.locator('div:nth-child(2) > .tiny-date-range-picker__header > button').first().click()
await page.locator('#disabled-date').getByText('31', { exact: true }).nth(2).click()
await expect(page.locator('.value1')).toHaveText('[ "2025-01-15", "2025-02-15" ]')

await page.locator('#disabled-date').getByText('15').nth(3).click()
await page.locator('#disabled-date').getByText('19').nth(2).click()
await expect(page.locator('.value1')).toHaveText('[ "2025-02-15", "2025-02-19" ]')
await page.locator('#disabled-date').getByText('15').nth(2).click()
await expect(page.locator('.value1')).toHaveText('[ "2025-01-31", "2025-02-15" ]')

// monthRange
await page.getByText('一月', { exact: true }).nth(1).click()
await page.getByText('二月', { exact: true }).nth(1).click()
await page.getByText('五月').nth(2).click()
await page.getByText('1 月', { exact: true }).nth(1).click()
await page.getByText('2 月', { exact: true }).nth(1).click()
await page.getByText('5 月').nth(2).click()
await expect(page.locator('.value2')).toHaveText('[ "2024-02", "2025-05" ]')

// yearRange
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/date-panel/event.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ test('[DatePanel] 测试事件', async ({ page }) => {

// 月份面板
await page.waitForTimeout(1000)
await page.getByText('七月').first().click()
await page.getByText('7 月').first().click()
await expect(page.getByText('触发 月份面板选中 事件，组件绑定值为：2025-')).toBeVisible()

// 年份面板
Expand All @@ -26,9 +26,9 @@ test('[DatePanel] 测试事件', async ({ page }) => {

// monthRange
await page.waitForTimeout(1000)
await page.locator('#event').getByText('七月').nth(2).click()
await page.locator('#event').getByText('五月').nth(2).click()
await expect(page.getByText('触发 月份区间面板选中 事件，组件绑定值为：2025-05,2025-')).toBeVisible()
await page.getByText('5 月').nth(2).click()
await page.getByText('7 月').nth(2).click()
await expect(page.getByText('触发 月份区间面板选中 事件，组件绑定值为：2024-07,2025-')).toBeVisible()

// yearRange
await page.waitForTimeout(1000)
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/date-panel/format.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ test('[DatePanel] 测试格式化', async ({ page }) => {
await expect(page.locator('.value1')).toHaveText('[ "2025/01/28", "2025/02/12" ]')

// monthRange
await page.locator('#format').getByText('三月').first().click()
await page.locator('#format').getByText('五月').nth(1).click()
await page.locator('#format').getByText('3 月').first().click()
await page.locator('#format').getByText('5 月').nth(1).click()
await expect(page.locator('.value2')).toHaveText('[ "2024/03", "2025/05" ]')
})
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/date-panel/readonly.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ test('[DatePanel] 测试只读', async ({ page }) => {
await expect(page.locator('.value')).toHaveText('2025-01-15')

// 月份面板
await page.getByText('七月').first().click()
await page.getByText('7 月').first().click()
await expect(page.locator('.month')).toHaveText('2025-01')

// 年份面板
Expand All @@ -26,8 +26,8 @@ test('[DatePanel] 测试只读', async ({ page }) => {
await expect(page.locator('.value1')).toHaveText('[ "2025-01-15", "2025-02-15" ]')

// monthRange
await page.getByText('二月').first().click()
await page.getByText('九月').nth(1).click()
await page.getByText('2 月').first().click()
await page.getByText('9 月').nth(1).click()
await expect(page.locator('.value2')).toHaveText('[ "2024-03", "2025-02" ]')

// yearRange
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
await page.getByText('2023 年').click()
await expect(page.getByText('2023 年')).toBeVisible()
// 联动
await page.getByText('一月', { exact: true }).first().click()
await page.getByText('六月').nth(1).click()
await page.getByText('1 月', { exact: true }).first().click()
await page.getByText('6 月').nth(1).click()
await expect(page.locator('.value-link1')).toHaveText('[ "2023-01", "2024-06" ]')

// 不联动
Expand All @@ -43,8 +43,8 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
'.tiny-month-range > .tiny-picker-panel__body-wrapper > .tiny-picker-panel__body > div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(2)'
)
.click()
await page.getByText('六月').nth(2).click()
await page.getByText('五月').nth(3).click()
await page.getByText('6 月').nth(2).click()
await page.getByText('5 月').nth(3).click()
await expect(page.locator('.value-unlink1')).toHaveText('[ "2023-06", "2025-05" ]')

// yaerRange
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,15 @@ test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
// 选择月份
await dateInput.click()
await page.getByRole('button', { name: '4 月' }).click()
await page.getByRole('cell', { name: '六月' }).locator('a').click()
await page.getByRole('cell', { name: '6 月' }).locator('a').click()
await page.getByRole('rowgroup').getByText('4').first().click()
await expect(dateInput).toHaveValue('2023-06-04')

// 选择年份
await dateInput.click()
await page.getByRole('button', { name: '2023 年' }).click()
await page.getByRole('cell', { name: '2024' }).getByText('2024').click()
await page.getByRole('cell', { name: '二月', exact: true }).locator('a').click()
await page.getByRole('cell', { name: '2 月', exact: true }).locator('a').click()
await page.getByRole('rowgroup').getByText('7').first().click()
await expect(dateInput).toHaveValue('2024-02-07')
})
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/date-picker/date-range.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,17 @@ test('测试日期范围选择', async ({ page }) => {
// 月份范围
const startMonth = page.getByPlaceholder('开始月份')
const endMonth = page.getByPlaceholder('结束月份')
await startMonth.click()
await startMonth.first().click()
await page.waitForTimeout(100)
await startMonth.fill('2023-05')
await startMonth.press('Tab')
await endMonth.fill('2023-06')
await endMonth.press('Enter')
await startMonth.click()
await page.waitForTimeout(100)
await page.getByText('一月').first().click()
await page.getByText('1 月').first().click()
await page.waitForTimeout(100)
await page.getByText('十二月').first().click()
await page.getByText('12 月').first().click()
await page.waitForTimeout(100)
await expect(startMonth).toHaveValue('2023-01')
await expect(endMonth).toHaveValue('2023-12')
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/date-panel/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
--tv-DatePanel-line-height: var(--tv-line-height-number, 1.5);

// 面板宽度(默认)
--tv-DatePanel-width: 284px;
--tv-DatePanel-width: 360px;
// 面板背景色
--tv-DatePanel-bg-color: var(--tv-color-bg-2, #ffffff);

Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/month-table/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<tr v-for="(row, key) in state.rows" :key="key">
<td v-for="(cell, key) in row" :class="getCellStyle(cell)" :key="key">
<div>
<a class="cell" v-text="t('ui.datepicker.months.' + state.months[cell.text])"></a>
<a class="cell" v-text="t(`ui.datepicker.month${cell.text + 1}`)"></a>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify that the new localization keys are properly defined.

The change from array-based lookup to direct numeric suffix format (ui.datepicker.month${cell.text + 1}) looks good for providing full month names instead of abbreviated forms. However, please ensure that:

  1. The new localization keys (ui.datepicker.month1, ui.datepicker.month2, etc.) are defined in all language files
  2. The cell.text value is guaranteed to be a number in the range 0-11
  3. This change doesn't break existing translations or components that might depend on the previous key format

🏁 Script executed:

#!/bin/bash
# Description: Verify the new localization keys exist and check for potential breaking changes

# Test: Search for the new localization key pattern in language files
rg -A 2 -B 2 "ui\.datepicker\.month[0-9]" --type json --type js --type ts

# Test: Check if the old key pattern is still used elsewhere
rg "ui\.datepicker\.months\." --type vue --type js --type ts

# Test: Find where cell.text is defined to verify it's always numeric
ast-grep --pattern 'cell.text'

Length of output: 1360

🏁 Script executed:

#!/bin/bash
# Search all locale files for the new month keys (month1–month12)
rg -n "ui\\.datepicker\\.month[0-9]+" -g "*.{json,js,ts,yml,yaml,vue}"

# Search for any remaining uses of the old key pattern
rg -n "ui\\.datepicker\\.months\\." -g "*.{vue,js,ts}"

# Inspect how cell.text is populated in the month-table logic
sed -n '50,150p' packages/renderless/src/month-table/index.ts

Length of output: 2727

Define new month translation keys in all locale files

The switch to t(\ui.datepicker.month${cell.text + 1}`) requires new keys (ui.datepicker.month1throughui.datepicker.month12`), but none are defined in the current locale files. To prevent missing-translation errors:

  • Add ui.datepicker.month1 … ui.datepicker.month12 entries to each language’s resource file, corresponding to full month names.
  • Confirm that cell.text (0–11) always yields valid keys once incremented.
  • Review the existing monthNames utility in packages/utils/src/date-util/index.ts (line 37) which still uses the old ui.datepicker.months.{month} pattern—either update it to use the new numeric keys or clean up the legacy keys if they’re no longer needed.
🤖 Prompt for AI Agents 
In packages/vue/src/month-table/src/pc.vue at line 18, the localization key
format was changed to use numeric suffixes (ui.datepicker.month1 to month12). To
fix this, add these new keys with full month names to all locale resource files
to avoid missing translations. Verify that cell.text is always a number from 0
to 11 so that adding 1 produces valid keys. Also, update or remove the old
monthNames utility in packages/utils/src/date-util/index.ts around line 37 to
align with the new key format and prevent inconsistencies.

</div>
</td>
</tr>
Expand Down
Loading