Skip to content

Conversation

@simonlei
Copy link

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

#6018
现有 工作日历功能 维护每年的节假日信息 目的在日期面板中禁止选择 节假日日期,节假日信息是后台按年份 返回的 ['2025-01-01', '2025-01-02',...] 需要在年份切换时请求对应年分的节假日 但是现在并不能监听到年份的变化
DatePicker 可以提供 月份 和 年份的 change 事件

💡 需求背景和解决方案

在 TdDatePickerProps 接口的末尾(onPresetClick 事件之后)添加了两个缺失的事件回调函数定义:

onMonthChange:月份切换发生变化时触发的事件

参数包含:month(月份)、date(日期)、e(鼠标事件)、trigger(触发器类型)

onYearChange:年份切换发生变化时触发的事件

参数包含:year(年份)、date(日期)、trigger(触发器类型)、e(鼠标事件)

已经在以下示例文件中添加了 onMonthChange 和 onYearChange 事件的演示:

  1. 基础示例 /packages/components/date-picker/_example/base.vue

特点:添加了事件日志显示,当用户切换月份或年份时,会在日期选择器上方显示蓝色提示文字,展示触发的事件信息

  1. 日期范围选择器示例 /packages/components/date-picker/_example/date-range.vue

特点:展示了日期范围选择器的月份和年份切换事件,包含 partial 参数(显示是左侧还是右侧面板触发的事件)

  1. 面板示例 /packages/components/date-picker/_example/panel.vue

特点:在所有面板组件(DatePickerPanel 和 DateRangePickerPanel)上都添加了这两个事件

事件演示效果
用户在使用这些示例时,可以:

查看控制台日志:所有事件都会在控制台输出详细信息

查看页面提示:在 base.vue 和 date-range.vue 示例中,页面上会显示蓝色提示文字,实时展示事件触发情况

了解事件参数:

onMonthChange:包含 month(月份)、date(日期对象)、trigger(触发方式)、e(鼠标事件)

onYearChange:包含 year(年份)、date(日期对象)、trigger(触发方式)、e(鼠标事件)

日期范围选择器还包含 partial 参数,标识是左侧还是右侧面板

📝 更新日志

  • 本条 PR 不需要纳入 Changelog

tdesign-vue-next

  • feat(DatePicker): 提供 月份 和 年份的 change 事件

@tdesign-vue-next/chat

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants