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

Jump to bottom

Fix：Datepicker disabledDate + monthRange does not behave as expected #2569

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+37 −9
Open

Fix：Datepicker disabledDate + monthRange does not behave as expected #2569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc97c1e
fix: Correct the current date to a valid date in autoSelectMonth
YannLynn Nov 13, 2024
913f72e
feat: add demo
YannLynn Nov 13, 2024
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
38 changes: 29 additions & 9 deletions packages/semi-foundation/datePicker/yearAndMonthFoundation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,9 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
const month = copy(currentMonth);
month[panelType] = item.month;

// make sure the right panel time is always less than the left panel time
// Make sure the time on the right panel is always greater than or equal to the time on the left panel
if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
month[right] = item.month + 1;
month[right] = item.month ;
}

this._adapter.setCurrentMonth(month);
Expand All @@ -121,8 +121,19 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
const { disabledDate, locale } = this._adapter.getProps();
const { months, currentMonth } = this._adapter.getStates();

const oppositeType = panelType === strings.PANEL_TYPE_LEFT ? 'right' : 'left';

const currentDate = setYear(Date.now(), item.year);
const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
// whether the date on the opposite is legal
const isOppositeMonthDisabled = disabledDate(setMonth(setYear(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));

if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
// all panel Date is legal
return;
}
let finalYear = year;
let finalMonth = currentMonth;
if (isCurrentMonthDisabled) {
const currentIndex = months.findIndex(({ month }) => month === currentMonth[panelType]);
let validMonth: typeof months[number];
Expand All @@ -131,15 +142,24 @@ export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthA
if (!validMonth) {
validMonth = months.slice(0, currentIndex).find(({ month }) => !disabledDate(setMonth(currentDate, month - 1)));
}
if (validMonth) {
const month = copy(currentMonth);
month[panelType] = validMonth.month;

// change year and month same time
this._adapter.setCurrentYearAndMonth(year, month);
this._adapter.notifySelectYearAndMonth(year, month);
if (validMonth && !isOppositeMonthDisabled) {
// only currentPanel Date is illegal
// just need to modify the month of the current panel
finalMonth[panelType] = validMonth.month;
} else if (validMonth && isOppositeMonthDisabled) {
// all panel Date is illegal
// change the value to the legal value calculated by the current panel
finalYear = { 'left': item.year, 'right': item.year };
finalMonth = { 'left': validMonth.month, 'right': validMonth.month };
}
} else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
// only opposite panel Date is illegal
// change the value to the legal value in the current panel
finalYear = { 'left': item.year, 'right': item.year };
finalMonth = { 'left': currentMonth[panelType], 'right': currentMonth[panelType] };
}
this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
}

backToMain() {
Expand Down
8 changes: 8 additions & 0 deletions packages/semi-ui/datePicker/_story/datePicker.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -605,6 +605,12 @@ export const MonthRangePicker = () => {
return date.getTime() < deadDate.getTime();
};

const disabledRangeDate = date => {
const deadDate = new Date('2025/3/1 00:00:00');
const startDate = new Date('2024/11/1 00:00:00');
return date.getTime() < startDate.getTime() || date.getTime() > deadDate.getTime();
};

return (
<>
<div>
Expand Down Expand Up @@ -640,6 +646,8 @@ export const MonthRangePicker = () => {
<br />
<div>年月禁用：禁用2023年3月前的所有年月</div>
<DatePicker type="monthRange" disabledDate={disabledDate}/>
<div>年月禁用：禁用2024年11月前 & 2025年2月后的所有年月</div>
<DatePicker type="monthRange" disabledDate={disabledRangeDate}/>
<br />
<br />
<div>validateStatus</div>
Expand Down
Loading