DatePicker 可以提供 月份 和 年份的 change 事件 #6018 #6260
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是?
🔗 相关 Issue
#6018
现有 工作日历功能 维护每年的节假日信息 目的在日期面板中禁止选择 节假日日期,节假日信息是后台按年份 返回的 ['2025-01-01', '2025-01-02',...] 需要在年份切换时请求对应年分的节假日 但是现在并不能监听到年份的变化
DatePicker 可以提供 月份 和 年份的 change 事件
💡 需求背景和解决方案
在 TdDatePickerProps 接口的末尾(onPresetClick 事件之后)添加了两个缺失的事件回调函数定义:
onMonthChange:月份切换发生变化时触发的事件
参数包含:month(月份)、date(日期)、e(鼠标事件)、trigger(触发器类型)
onYearChange:年份切换发生变化时触发的事件
参数包含:year(年份)、date(日期)、trigger(触发器类型)、e(鼠标事件)
已经在以下示例文件中添加了 onMonthChange 和 onYearChange 事件的演示:
特点:添加了事件日志显示,当用户切换月份或年份时,会在日期选择器上方显示蓝色提示文字,展示触发的事件信息
特点:展示了日期范围选择器的月份和年份切换事件,包含 partial 参数(显示是左侧还是右侧面板触发的事件)
特点:在所有面板组件(DatePickerPanel 和 DateRangePickerPanel)上都添加了这两个事件
事件演示效果
用户在使用这些示例时,可以:
查看控制台日志:所有事件都会在控制台输出详细信息
查看页面提示:在 base.vue 和 date-range.vue 示例中,页面上会显示蓝色提示文字,实时展示事件触发情况
了解事件参数:
onMonthChange:包含 month(月份)、date(日期对象)、trigger(触发方式)、e(鼠标事件)
onYearChange:包含 year(年份)、date(日期对象)、trigger(触发方式)、e(鼠标事件)
日期范围选择器还包含 partial 参数,标识是左侧还是右侧面板
📝 更新日志
tdesign-vue-next
@tdesign-vue-next/chat
@tdesign-vue-next/auto-import-resolver
☑️ 请求合并前的自查清单