Skip to content

Commit 6dcf4b9

Browse files
authored
fix: DatePicker 中disabledTime 禁用问题 (#666)
* fix: fix-bug * chore: remove whitespace * feat: change logic * feat: change logic * feat: change logic * test: add test case * test: add test case * test: add test case * fix: fix incorrect time
1 parent 8ebebae commit 6dcf4b9

File tree

4 files changed

+43
-1
lines changed

4 files changed

+43
-1
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ lib
2828
es
2929
yarn.lock
3030
package-lock.json
31+
pnpm-lock.yaml
3132
coverage/
3233
.doc
3334
.history

docs/examples/time.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default () => {
1616
picker="date"
1717
showTime
1818
disabledTime={() => ({
19-
disabledHours: () => [1, 2, 3, 4, 5, 6],
19+
disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 20, 21],
2020
})}
2121
locale={zhCN}
2222
generateConfig={momentGenerateConfig}

src/panels/DatetimePanel/index.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@ export type DatetimePanelProps<DateType> = {
1818
const ACTIVE_PANEL = tuple('date', 'time');
1919
type ActivePanelType = (typeof ACTIVE_PANEL)[number];
2020

21+
const findValidTime = (disabledRange: number[], maxValidTime: number) => {
22+
const rangeSet = new Set(disabledRange);
23+
for (let i = 0; i <= maxValidTime; i++) {
24+
if (!rangeSet.has(i)) {
25+
return i;
26+
}
27+
}
28+
29+
return 0
30+
}
31+
2132
function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
2233
const {
2334
prefixCls,
@@ -111,6 +122,15 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
111122
selectedDate = generateConfig.setYear(selectedDate, generateConfig.getYear(defaultValue));
112123
selectedDate = generateConfig.setMonth(selectedDate, generateConfig.getMonth(defaultValue));
113124
selectedDate = generateConfig.setDate(selectedDate, generateConfig.getDate(defaultValue));
125+
} else if (source === 'date' && value && disabledTime) {
126+
const disabledTimes = disabledTime(value)
127+
128+
const validHour = findValidTime(disabledTimes.disabledHours?.() || [-1], 23)
129+
const validMinute = findValidTime(disabledTimes.disabledMinutes?.(validHour) || [-1], 59)
130+
const validSeconds = findValidTime(disabledTimes.disabledSeconds?.(validHour, validMinute) || [-1], 59)
131+
selectedDate = generateConfig.setHour(selectedDate, validHour)
132+
selectedDate = generateConfig.setMinute(selectedDate, validMinute)
133+
selectedDate = generateConfig.setSecond(selectedDate, validSeconds)
114134
}
115135

116136
if (onSelect) {

tests/disabledTime.spec.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,27 @@ describe('Picker.DisabledTime', () => {
138138
jest.useRealTimers();
139139
});
140140

141+
it('disabledTime should reset correctly when date changed by click', function () {
142+
const disabledTime = jest.fn((_: Moment | null, __: 'start' | 'end') => ({
143+
disabledHours: () => [0, 1, 2, 3, 4, 10],
144+
}));
145+
146+
render(
147+
<MomentRangePicker
148+
open
149+
showTime
150+
disabledTime={disabledTime}
151+
defaultValue={[getMoment('1989-11-28'), getMoment('1990-09-03')]}
152+
/>,
153+
);
154+
155+
expect(document.querySelector('.rc-picker-input > input').getAttribute('value')).toEqual('1989-11-28 00:00:00');
156+
157+
fireEvent.click(document.querySelectorAll('.rc-picker-cell-inner')[2]);
158+
159+
expect(document.querySelector('.rc-picker-input > input').getAttribute('value')).toEqual('1989-10-31 05:00:00');
160+
});
161+
141162
describe('warning for legacy props', () => {
142163
it('single', () => {
143164
resetWarned();

0 commit comments

Comments
 (0)