alibaba-fusion · YunMeng99 · Jan 30, 2024 · Mar 6, 2024 · Mar 19, 2024
diff --git a/components/date-picker2/__docs__/demo/disabledDate/index.tsx b/components/date-picker2/__docs__/demo/disabledDate/index.tsx
@@ -22,6 +22,13 @@ const disabledDate = function (date, mode) {
     }
 };
 
+const disabledCurrentTime = function (date) {
+    return (
+        date.valueOf() < Number(dayjs().valueOf()) ||
+        date.valueOf() > Number(dayjs().add(6, 'day').valueOf())
+    );
+};
+
 ReactDOM.render(
     <div>
         <DatePicker2 disabledDate={disabledDate} onChange={val => console.log(val)} />
@@ -36,6 +43,13 @@ ReactDOM.render(
         <RangePicker disabledDate={disabledDate} onChange={val => console.log(val)} />
         <br />
         <br />
+        <RangePicker
+            showTime
+            disabledDate={disabledCurrentTime}
+            onChange={val => console.log(val)}
+        />
+        <br />
+        <br />
     </div>,
     mountNode
 );
diff --git a/components/date-picker2/__tests__/index-spec.js b/components/date-picker2/__tests__/index-spec.js
@@ -1128,6 +1128,52 @@ describe('Picker', () => {
             wrapper = mount(<DatePicker state="loading" />);
             assert(wrapper.find('.next-icon-loading').length === 1);
         });
+
+        it('should support prohibit minutes and seconds', () => {
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+            const disabledDate = date => {
+                return (
+                    date.valueOf() < Number(moment('2024-01-22 13:30:12').valueOf()) ||
+                    date.valueOf() > Number(moment('2024-01-28 18:30:12').valueOf())
+                );
+            };
+            wrapper = mount(
+                <RangePicker
+                    showTime
+                    disabledDate={disabledDate}
+                    visible={true}
+                    followTrigger
+                    onChange={val => console.log(val)}
+                    defaultPanelValue={dayjs('2024-01-22 14:30:10')}
+                />,
+                { attachTo: div }
+            );
+            const isDisabledNode = name => {
+                return div.querySelector(name).classList.contains('next-disabled');
+            };
+
+            let startHour = isDisabledNode('.next-time-picker2-menu-hour > li[title="12"]');
+            let startMinute = isDisabledNode('.next-time-picker2-menu-minute > li[title="29"]');
+            let startSecond = isDisabledNode('.next-time-picker2-menu-second > li[title="11"]');
+            assert(startHour && startMinute && startSecond);
+
+            ReactTestUtils.Simulate.click(div.querySelector('td[title="2024-01-28"]'));
+
+            let endHour = isDisabledNode('.next-time-picker2-menu-hour > li[title="19"]');
+            ReactTestUtils.Simulate.click(
+                div.querySelector('.next-time-picker2-menu-hour > li[title="18"]')
+            );
+
+            let endMinute = isDisabledNode('.next-time-picker2-menu-minute > li[title="31"]');
+            ReactTestUtils.Simulate.click(
+                div.querySelector('.next-time-picker2-menu-minute > li[title="30"]')
+            );
+
+            let endSecond = isDisabledNode('.next-time-picker2-menu-second > li[title="13"]');
+
+            assert(endHour && endMinute && endSecond);
+        });
     });
 });
 

diff --git a/components/date-picker2/panels/date-panel.jsx b/components/date-picker2/panels/date-panel.jsx
@@ -72,6 +72,19 @@ class DatePanel extends React.Component {
         func.invoke(this.props, 'onPanelChange', [v, mode]);
     };
 
+    checkValueDisabled = (v, mode) => {
+        const { showTime, disabledDate, panelMode } = this.props;
+
+        if (showTime && mode === panelMode) {
+            return (
+                disabledDate(v.hour(0).minute(0).second(0), mode) &&
+                disabledDate(v.hour(23).minute(59).second(59), mode)
+            );
+        }
+
+        return disabledDate && disabledDate(v, mode);
+    };
+
     render() {
         const {
             mode,
@@ -109,7 +122,7 @@ class DatePanel extends React.Component {
                     colNum={showTime ? 6 : undefined}
                     onSelect={this.handleSelect}
                     onPanelChange={this.handlePanelChange}
-                    disabledDate={disabledDate}
+                    disabledDate={this.checkValueDisabled}
                     dateCellRender={dateCellRender}
                 />
                 {showTime && mode === panelMode ? (
@@ -119,6 +132,8 @@ class DatePanel extends React.Component {
                         value={value || this.state.defaultTime}
                         onSelect={this.onTimeSelect}
                         disabledTime={disabledTime}
+                        disabledDate={disabledDate}
+                        panelMode={mode}
                         timePanelProps={{ ..._disabledTime, ...timePanelProps }}
                     />
                 ) : null}

diff --git a/components/date-picker2/panels/range-panel.jsx b/components/date-picker2/panels/range-panel.jsx
@@ -145,7 +145,7 @@ class RangePanel extends React.Component {
             disabledDate,
             value: [begin, end],
         } = this.props;
-
+        
         const unit = mode2unit(mode);
 
         return (
@@ -328,8 +328,17 @@ class RangePanel extends React.Component {
         });
     };
 
+    checkValueDisabled = (v, mode) => {
+        const disabledDate = this.props.justBeginInput ? this.props.disabledDate : this.disabledDate;
+        return (
+            disabledDate(v.hour(0).minute(0).second(0), mode) &&
+            disabledDate(v.hour(23).minute(59).second(59), mode)
+        );
+    };
+
+
     renderRangeTime = sharedProps => {
-        const { value, prefix, showTime, inputType, timePanelProps = {}, disabledTime } = this.props;
+        const { value, prefix, showTime, inputType, timePanelProps = {}, disabledTime, mode } = this.props;
 
         const className = classnames(`${prefix}range-picker2-panel`, {
             [`${prefix}range-picker2-panel-single`]: this.hasModeChanged,
@@ -346,6 +355,7 @@ class RangePanel extends React.Component {
                 <Calendar
                     panelValue={this.state.panelValue}
                     {...sharedProps}
+                    disabledDate={this.checkValueDisabled}
                     value={value[inputType]}
                     onPanelChange={this.handlePanelChange}
                 />
@@ -356,6 +366,8 @@ class RangePanel extends React.Component {
                         value={value[inputType] || this.state.defaultTime[inputType]}
                         onSelect={this.onTimeSelect}
                         disabledTime={disabledTime}
+                        disabledDate={sharedProps.disabledDate}
+                        panelMode={mode}
                         timePanelProps={{ ..._disabledTime, ...timePanelProps }}
                     />
                 ) : null}

diff --git a/components/date-picker2/panels/time-panel.jsx b/components/date-picker2/panels/time-panel.jsx
@@ -4,9 +4,53 @@ import PT from 'prop-types';
 import TimePickerPanel from '../../time-picker2/panel';
 import SharedPT from '../prop-types';
 import { func } from '../../util';
+import { getDisabledTime } from '../util'
 
 const DECADE_TIME_FORMAT = 'HH:mm:ss';
 
+const WithTimePanel = function (WrappedComponent) {
+    return class extends React.Component {
+        static propTypes = {
+            ...WrappedComponent.propTypes,
+            disabledDate: PT.func,
+            panelMode: PT.string,
+        };
+
+        getDisabledStatus = () => {
+            const { value, timePanelProps, disabledDate } = this.props;
+
+            // 直接禁用时间选择，权重最高
+            if (timePanelProps.disabled) {
+                return true;
+            }
+
+            // 开启自定义禁用日期
+            if (typeof disabledDate === 'function') {
+                // 如果“今天”是属于禁用时间的话，先选时分秒可能导致回填数据与预期不符合，所以未选择值时，提前警用时间选择
+                return !value;
+            }
+
+            return false;
+        }
+
+        render() {
+            const { timePanelProps, ...rest } = this.props;
+
+            // 开启 disabledDate 属性时，需要提前禁用时分秒
+            // 如果“今天”是属于禁用时间的话，先选时分秒可能导致回填数据与预期不符合
+            const disabled = this.getDisabledStatus();
+            const disabledTime = getDisabledTime(this.props);
+
+            return (
+                <WrappedComponent
+                    {...rest}
+                    timePanelProps={{ ...timePanelProps, disabled, ...disabledTime }}
+                />
+            );
+        }
+    };
+};
+
 class TimePanel extends React.PureComponent {
     static propTypes = {
         rtl: PT.bool,
@@ -68,9 +112,14 @@ class TimePanel extends React.PureComponent {
         const { showHour, showMinute, showSecond } = this.getShow();
 
         return (
-            <div dir={rtl ? 'rtl' : undefined} className={`${prefix}date-time-picker-wrapper ${prefix}calendar2-panel`}>
+            <div
+                dir={rtl ? 'rtl' : undefined}
+                className={`${prefix}date-time-picker-wrapper ${prefix}calendar2-panel`}
+            >
                 <div className={`${prefix}calendar2-header`}>
-                    <div className={`${prefix}calendar2-header-text-field`}>{value ? this.formater(value) : null}</div>
+                    <div className={`${prefix}calendar2-header-text-field`}>
+                        {value ? this.formater(value) : null}
+                    </div>
                 </div>
                 <TimePickerPanel
                     prefix={prefix}
@@ -87,4 +136,4 @@ class TimePanel extends React.PureComponent {
     }
 }
 
-export default polyfill(TimePanel);
+export default polyfill(WithTimePanel(TimePanel));
diff --git a/components/date-picker2/util.js b/components/date-picker2/util.js
@@ -1,4 +1,4 @@
-import { datejs } from '../util';
+import { datejs, func } from '../util';
 import { DATE_INPUT_TYPE } from './constant';
 
 export function setTime(targetVal, sourceVal) {
@@ -49,6 +49,94 @@ export function fmtValue(value, fmt) {
  */
 export function isValueChanged(newValue, oldValue) {
     return Array.isArray(newValue)
-        ? isValueChanged(newValue[0], oldValue && oldValue[0]) || isValueChanged(newValue[1], oldValue && oldValue[1])
+        ? isValueChanged(newValue[0], oldValue && oldValue[0]) ||
+              isValueChanged(newValue[1], oldValue && oldValue[1])
         : newValue !== oldValue && !datejs(newValue).isSame(oldValue);
 }
+
+export function getDisabledTime(props) {
+    const { timePanelProps, value, disabledDate, panelMode } = props;
+    const { disabledHours, disabledMinutes, disabledSeconds } = timePanelProps;
+
+    const disabledItems = list => index => {
+        return list.indexOf(index) >= 0;
+    };
+
+    if (disabledHours || disabledMinutes || disabledSeconds) {
+        return {
+            disabledHours,
+            disabledMinutes,
+            disabledSeconds,
+        };
+    }
+
+    if (value && typeof disabledDate === 'function') {
+        let newDate = value.clone();
+        const hours = 24;
+        const minutesAndSeconds = 60;
+        const _disabledHours = [];
+        const _disabledMinutes = [];
+        const _disabledSeconds = [];
+        let currentHour = value.get('hour');
+        let currentMinute = value.get('minute');
+
+        for (let i = 0; i < hours; i++) {
+            // 禁用小时
+            if (
+                disabledDate(newDate.hour(i).minute(0).second(0), panelMode) &&
+                disabledDate(newDate.hour(i).minute(59).second(59), panelMode)
+            ) {
+                _disabledHours.push(i);
+            }
+        }
+
+        if (_disabledHours.length && _disabledHours.length < hours) {
+            // 边界处理
+            while (_disabledHours.indexOf(currentHour) > -1) {
+                currentHour = (currentHour + 1) % hours;
+            }
+            for (let i = 0; i < minutesAndSeconds; i++) {
+                // 从当前小时开始遍历
+                if (
+                    disabledDate(newDate.hour(currentHour).minute(i).second(0), panelMode) &&
+                    disabledDate(newDate.hour(currentHour).minute(i).second(59), panelMode)
+                ) {
+                    _disabledMinutes.push(i);
+                }
+            }
+        }
+
+        if (_disabledMinutes.length && _disabledMinutes.length < minutesAndSeconds) {
+            // 边界处理
+            while (_disabledMinutes.indexOf(currentMinute) > -1) {
+                currentMinute = (currentMinute + 1) % minutesAndSeconds;
+            }
+            for (let i = 0; i < minutesAndSeconds; i++) {
+                // 从当前时分开始遍历
+                newDate = newDate.hour(currentHour).minute(currentMinute).second(i);
+                if (disabledDate(newDate, panelMode)) {
+                    _disabledSeconds.push(i);
+                }
+            }
+        }
+
+        // 当前选中时间落在禁用区
+        if (disabledDate(value, panelMode)) {
+            // 边界处理
+            let currentSecond = value.get('second');
+            while (_disabledSeconds.indexOf(currentSecond) > -1) {
+                currentSecond = (currentSecond + 1) % minutesAndSeconds;
+            }
+            newDate = newDate.hour(currentHour).minute(currentMinute).second(currentSecond);
+            func.invoke(props, 'onSelect', [newDate]);
+        }
+
+        return {
+            disabledHours: disabledItems(_disabledHours),
+            disabledMinutes: disabledItems(_disabledMinutes),
+            disabledSeconds: disabledItems(_disabledSeconds),
+        };
+    }
+
+    return null;
+}