配合Hzero-UI 對DatePicker 禁用某時刻之前的選項

主要是hzero-ui沒找到一個能直接設(shè)置禁用某時刻之前的時間,只能禁用某些日期,在對小時、分鐘、秒進(jìn)行禁用設(shè)置時,只能禁用特定時段的時間,如0-8點(diǎn),非常不靈活。
有有一種方式是對form的getFieldDecorator方法中的rule里面通過寫min和max,這樣選擇了超出范圍的時間時,會有紅色的報錯提示。這樣也能實現(xiàn),但是效果跟理想的效果有一些差距。
于是就只能對change事件進(jìn)行監(jiān)聽,對disabledTime進(jìn)行動態(tài)設(shè)置。

組件支持方案:用dataSet搭配C7nPro的 DatePicker組件

這樣可以直接在dataSet的fields屬性里面直接寫min和max,實現(xiàn)的效果堪稱完美,方便極了。


function disabledDate(now) {
  return now && now < moment().startOf('day');
}
function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}
export default class XXX extends React.Component {
state = {
    disabledTime: () => {
      return {
        disabledHours: () => range(0, 0),
        disabledMinutes: () => range(0, 0),
        disabledSeconds: () => range(0, 0),
      };
    },
  };

  componentDidMount() {
    this.setState({
      disabledTime: () => {
        return {
          disabledHours: () => range(0, moment().hour()),
          disabledMinutes: () => range(0, moment().minute()),
          disabledSeconds: () => range(0, 60),
        };
      },
    });
  }

  setDisabledTime = (current) => {
    const cur = moment(current);
    const now = moment();
    if (cur.format('YYYY MM DD') === now.format('YYYY MM DD')) {
      this.setState({
        disabledTime: () => {
          return {
            disabledHours: () => range(0, now.hour()),
            disabledMinutes: () => range(0, 0),
            disabledSeconds: () => range(0, 0),
          };
        },
      });
      if (cur.hour() === now.hour()) {
        this.setState({
          disabledTime: () => {
            return {
              disabledHours: () => range(0, now.hour()),
              disabledMinutes: () => range(0, now.minute()),
              disabledSeconds: () => range(0, 0),
            };
          },
        });
        if (cur.minute() === now.minute()) {
          this.setState({
            disabledTime: () => {
              return {
                disabledHours: () => range(0, now.hour()),
                disabledMinutes: () => range(0, now.minute()),
                disabledSeconds: () => range(0, now.second()),
              };
            },
          });
        } else {
          this.setState({
            disabledTime: () => {
              return {
                disabledHours: () => range(0, now.hour()),
                disabledMinutes: () => range(0, now.minute()),
                disabledSeconds: () => range(0, 0),
              };
            },
          });
        }
      } else {
        this.setState({
          disabledTime: () => {
            return {
              disabledHours: () => range(0, now.hour()),
              disabledMinutes: () => range(0, 0),
              disabledSeconds: () => range(0, 0),
            };
          },
        });
      }
    } else {
      this.setState({
        disabledTime: () => {
          return {
            disabledHours: () => range(0, 0),
            disabledMinutes: () => range(0, 0),
            disabledSeconds: () => range(0, 0),
          };
        },
      });
    }
  };
render(){
  return (
                  <DatePicker
                    renderExtraFooter={this.quotationEndDateFooter} // 渲染個小方塊擋住左下角的“此刻”按鈕
                    onChange={this.setDisabledTime}
                    disabledDate={disabledDate} // 禁用日期
                    disabledTime={disabledTime} // 禁用時間
                  />
  )
}
                
}
// 用來渲染小方塊
.datepicker-foot-wrapper {
  width: 0;
  height: 0;
  div {
    width: 40px;
    height: 30px;
    background-color: white;
    position: relative;
    top: 5px;
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容