Skip to content

fix(calendar): fix calendar range issues #3759

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

Jump to bottom
Merged
merged 3 commits into from
Nov 6, 2025
Merged

fix(calendar): fix calendar range issues #3759

merged 3 commits into from
Nov 6, 2025

Conversation

@shumuuu
Copy link
Contributor

@shumuuu shumuuu commented Nov 1, 2025 •
edited
Loading

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

💡 需求背景和解决方案

代码缺陷

其一，组件源码中的月份禁用选项生成依据仅为先起始年份后终止年份的单侧判断

// src\calendar\calendar.tsx L540~546
if (year === beginYear) {
  const beginMon = parseInt(dayjs(this.rangeFromTo.from).format('M'), 10);
  disabled = month < beginMon;
} else if (year === endYear) {
  const endMon = parseInt(dayjs(this.rangeFromTo.to).format('M'), 10);
  disabled = month > endMon;
}

只有在切换年份时才会触发月份的禁用选项更新。当起止年份相同时（假定为2025年），若年份选中2025年，以上逻辑仅会判断当前选中项与起始年份相同然后禁用起始月份之前的月份选项，而忽略对终止月份之后的月份选项的禁用

这个问题在web端三个技术栈的仓库中均存在，应该是逻辑复用的问题
见tdesign-vue-next #6045

其二，生成年份选项时多余且错误地调用了checkMonthAndYearSelectorDisabled函数来判断年份选项的禁用状态。年份选项生成一定在范围内，无需额外编写禁用状态逻辑；且checkMonthAndYearSelectorDisabled函数是用于月份选项禁用范围的判定，用于年份选项会导致实际可选择范围异常

// src\calendar\calendar.tsx L208~215
for (let i = begin; i <= end; i++) {
  const disabled = this.checkMonthAndYearSelectorDisabled(i, this.curSelectedMonth);
  re.push({
    value: i,
    label: this.t(this.global.yearSelection, { year: i }),
    disabled,
  });
}

解决方案

其一，

// src\calendar\calendar.tsx L537~551
// 读取起止年份
const beginYear = dayjs(this.rangeFromTo.from).year();
const endYear = dayjs(this.rangeFromTo.to).year();
// 读取起止月份
const beginMon = parseInt(dayjs(this.rangeFromTo.from).format('M'), 10);
const endMon = parseInt(dayjs(this.rangeFromTo.to).format('M'), 10);

if (beginYear === endYear) {
  // 同一年内，禁用开始月份至结束月份之外的月份选项
  disabled = month < beginMon || month > endMon;
} else if (year === beginYear) {
  disabled = month < beginMon;
} else if (year === endYear) {
  disabled = month > endMon;
}

将可复用的月份处理逻辑提前，然后在单侧判断之前增加一个分支逻辑判断起止年份是否相同，相同的话将禁用的月份选项设定为在起止月份之外的即可

其二，删去多余的禁用状态逻辑，固定启用所有年份选项

3539221cda17773005408a756aa13f29

📝 更新日志

  • fix(calendar): 修复了当设定日历的range值为同一年内时，终止月份之后的月份选项没有正常禁用的问题

  • fix(calendar): 修复了年份选项错误地使用了月份选项禁用范围判定逻辑的问题

  • 本条 PR 不需要纳入 Changelog

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

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

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

@shumuuu shumuuu mentioned this pull request Nov 2, 2025
Open
16 tasks
@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 6, 2025

tdesign-vue2-demo-compiler-2-6

npm i https://pkg.pr.new/tdesign-vue@3759

commit: 991a36f

@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2025

完成

@uyarn uyarn merged commit a072b7e into Tencent:develop Nov 6, 2025
10 checks passed
@shumuuu shumuuu deleted the fix/calendar branch November 6, 2025 03:11
@shumuuu shumuuu mentioned this pull request Nov 6, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@uyarn uyarn uyarn approved these changes

@chaishi chaishi Awaiting requested review from chaishi chaishi is a code owner

@xiaosansiji xiaosansiji Awaiting requested review from xiaosansiji xiaosansiji is a code owner

@maoyiluo maoyiluo Awaiting requested review from maoyiluo maoyiluo is a code owner

@liweijie0812 liweijie0812 Awaiting requested review from liweijie0812 liweijie0812 is a code owner

@LoopZhou LoopZhou Awaiting requested review from LoopZhou LoopZhou is a code owner

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

2 participants

@shumuuu @uyarn