亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我將如何比較表單中的兩個日期并驗證它們?第二個不應該在第一個之前

我將如何比較表單中的兩個日期并驗證它們?第二個不應該在第一個之前

holdtom 2023-05-18 09:48:32
我正在嘗試使用 Bootstrap 在 React 中構建一個表單。我有兩個日期(一個是你開始工作的時間,另一個是你結束公司工作的時間),第二個不應該在第一個之前。所以如果第一個是 10.1.2020,你應該不能在第二個中選擇這個日期之前的日期。作為一個反應應用程序,我也給你一個鏈接:https://codesandbox.io/s/friendly-worker-nwtgu ?file=/package.json我感興趣的代碼在這些組件中:Practical 和 PracticalForm。表格代碼:       <Form.Group controlId="formBasicDateFrom">          <Form.Label>Worked from</Form.Label>          <Form.Control            onChange={(e) => {              checkDate(e);              handleChange(e);            }}            type="date"            defaultValue={dateFrom}            name="dateFrom"            required          />        </Form.Group>        <Form.Group controlId="formBasicDateUntil">          <Form.Label>Worked to</Form.Label>          <Form.Control            isInvalid={validate}            onChange={(e) => {              checkDate(e);              handleChange(e);            }}            // onChange={(e) => {            //   handleChange(e);            //   checkDate();            // }}            type="date"            defaultValue={dateTo}            name="dateTo"            required          />          <Form.Control.Feedback type="invalid">            Date must be later then date from when you worked...          </Form.Control.Feedback>        </Form.Group> 我驗證的函數現在看起來像這樣:checkDate = (event) => {    let d1 = new Date(this.state.dateFrom);    let d2 = new Date(this.state.dateTo);    if (d1.getTime() > d2.getTime()) {      this.setState({        validate: false,      });    } else {      this.setState({        validate: true,      });    }    console.log(d1.getTime());    console.log(d2.getTime());    console.log(this.state.validate);  };
查看完整描述

1 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

您可以將checkDate(event)函數移動到函數內部,因為這里的事物是異步的,因此在設置狀態時您可以調用this.setState類似的東西,handleChangecheckDate(event)


  handleChange = (event) => {

    this.setState(

      {

        [event.target.name]: event.target.value

      },

      () => {

        this.checkDate(event);

      }

    );

  };

然后像這樣修改checkDate函數,


  checkDate = async (event) => {

    let d1 = new Date(this.state.dateFrom);

    let d2 = new Date(this.state.dateTo);


    if (d1.getTime() < d2.getTime()) {

      this.setState({

        validate: false

      });

    } else {

      this.setState({

        validate: true

      });

    }

    console.log(d1.getTime());

    console.log(d2.getTime());

    console.log(this.state.validate);

  };

也改變條件,


d1.getTime() > d2.getTime() 截止 d1.getTime() < d2.getTime()日期d1應該總是小于d2日期...


查看完整回答
反對 回復 2023-05-18
  • 1 回答
  • 0 關注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號