自己的时间选择器,将时间添加到日期和从日期选择器中选择的时间

时间:2019-07-01 12:17:26

标签: javascript reactjs

我使用日期选择器选择日期->保存在this.state.startDate中。从第一个输入中选择小时,从第二个输入分钟中选择小时。时间和分钟将转换为秒。将所选的小时和分钟添加到this.state.startDate并保存在变量different中。 时间和分钟会添加到选定的日期,但是如何在日期和时间中在输入中设置字段,例如,我将从2 h 10分钟移回1h 10分钟。这应该从所选日期中减去。而且它一直都在增加。

示例:  我从日期选择器中选择:2019-01-12, 14:00。 我选择了时间选择器2h 01 min 应该是:2019-01-12, 16:01。 //返回我好 但是,如果我再次更改,则1h: 01min->的时间选择器应为:2019-01-12, 15:01。 它现在回到我的位置:2019-01-12, 18:01

图片:https://imgur.com/90mPtAc

此处的代码:https://stackblitz.com/edit/react-csjkvb

  this.state = {
      startDate: new Date(),
      status: '',
      hours: 1,
      minutes: 1,
      different: null
    }

    handleChange = (date) => {
        this.setState({
            startDate: date
        });
    }

  onChangeH = (hours) => {
    this.setState({
      hours: hours * 60 * 60
    })
    console.log('changed', hours);
  }

  onChangeM = (minutes) => {
    this.setState({
      minutes: minutes * 60
    })
    console.log('changed', minutes);
  }

  convertToSeconds = () => {
      let seconds = this.state.hours + this.state.minutes
      let b = this.state.startDate
      b.setSeconds(d.getSeconds() + seconds);
      this.setState({
        different: b
      })
  }


  <DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    dateFormat="yyyy-MM-dd"
  /> 


    <p>Hours:</p>
    <input type="number" min={1} max={23} defaultValue={1} onChange={this.onChangeH} />
    </div>

    <p>Minutes:</p>
    <input type="number" min={1} max={59} defaultValue={1} onChange={this.onChangeM} />

0 个答案:

没有答案