antd-日曆元件，前後禁止選擇，只能選中間一部分：

dateDisabledDate(current) { // 需求有效期的禁止選擇時間
  if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) {
   return current && (current < moment().subtract(1,'d').add(1,"M") || current > moment(this.state.sailingtimeValue[0]).subtract(1,'d'));
  } else {
   return current && current < moment().subtract(1,"M")
  }
 }

補充知識：關於 Ant Design 中 Input 元件的 defaultValue 屬性的一個小問題

記錄關於一次 Ant Design 使用時遇到的一個問題，defaultValue屬性賦值，頁面互動操作處理資料之後頁面資料未更新（未按照預期顯示）。

 class Component extends React.Component{
  constructor(props) {
   super(props);
   this.state = {
    list: [
     {name: 111},{name: 222},{name: 333},]
   };
  }

  deal(index) {
   let {list} = this.state;
   list.splice(index,1);
   this.setState({
    list
   });
  }

  render() {
   let {list} = this.state;

   return (
    <span>
    <Button type="danger" onClick={this.deal.bind(this,index)}>刪除</Button>
    {
     list.map((item,index) => {
      <Row>
       <Col span={24}>
        <Item {...formItemLayout} label=" " colon={false}>
         <Input defaultValue={item.name}
           onChange={event => {this.nameChange(event,index)}} />
        </Item>
       </Col>
      </Row>
     })
    }
    </span>
   );
  }
 }

頁面初始效果：

經過 deal 方法處理之後的效果：

經過多次嘗試，比如：

懷疑 splice 出了問題，因為工程中 splice 有很多庫的處理，經過各種嘗試列印 splice 處理之後的資料結果，排除 splice 因素

嘗試 react-addons-update ，排除，

在 render 函式中列印結果，發現數據更新過了，費解…

在 render 中，通過 {item.name} 檢測資料變化，確定 span 顯示的資料已經發生變化，最終確定結果：資料已經更新，Input 顯示存在問題！！！

……

經過一段時間的思考，確認資料已經更新，只是在顯示的時候出了問題，返回去查 antD 的 Input 文件，發現了：

defaultValue 與 value 兩個相似的屬性，於是嘗試著 value 替代 defaultValue 最終解決問題。

以上這篇antd-日曆元件,只能選中間一部分的例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。