[DatePicker]DatePicker disabledTime 失效

[xiaojianbu]

Which Component 出现bug的组件

• DatePicker

semi-ui version

• latest

Expected result 期望的结果是什么

• disabledTime 禁止时间生效

Actual result 实际的结果是什么

• disabledTime 禁止时间失效

Steps to reproduce 复现步骤

• 先设置时间为第二天的下午5-6点
• 再切换日期为当天
• 禁止时间失效

Reproducible code 复现代码

import React from 'react';
import { DatePicker } from '@ies/semi-ui-react';
import * as dateFns from 'date-fns';

class App extends React.Component {
    constructor(props = {}) {
        super(props);

        this.today = () => new Date();

        this.disabledTime = date =>
            dateFns.isToday(date)
                ? {
                      disabledHours: () => [17, 18],
                  }
                : null;
    }

    render() {
        return (
                <div>
                    <h4>禁用时间：禁用今天下午5-6点</h4>
                    <DatePicker type="dateTime" hideDisabledOptions={false} disabledTime={this.disabledTime} />
                </div>
        );
    }
}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

[shijiatongxue]

目前的交互行为不好用。disabledTime 只对时间生效，无法控制日期是否可以选择。可以先通过下面的方式实现这个目标 o(╥﹏╥)o

() => {
    const [value, setValue] = useState();
    const disabledTime = date =>
        dateFns.isToday(date)
            ? {
                disabledHours: () => [17, 18],
            }
            : null;

    const disabledDate = date => {
        const h = dateFns.isDate(value) && value.getHours() || 0;
        const d = date.getDate();
        console.log(d, h);

        if (dateFns.isToday(date) && [17, 18].includes(h)) {
            return true;
        } else {
            return false;
        }
    };

    const handleChange = (date) => {
        setValue(date);
    };

    return (
        <div>
            <h4>禁用时间：禁用今天下午5-6点</h4>
            <DatePicker type="dateTime" onChange={handleChange} disabledDate={disabledDate} disabledTime={disabledTime} />
        </div>
    );
}

[shijiatongxue]

建议优化 disabledDate 逻辑，如果已选时间在禁用范围内，则日期也不可选（For Semi RD）。