[MUI Datetimepicker通过使用下拉选择更改值

Posted 2021-04-13

我正在使用react datetimepicker，并将使用选择器更改值。但是当我选择一个选项时它并没有改变（例如：我选择6个月，它将添加6个月的完成日期）。这是我的代码

const handleDateChange = (date,value) => {
    setSelectedDate(date);
    //console.log(value);
    props.onChange(value); //setstate
};

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Grid container justify="space-around">
        <ThemeProvider theme={getMuiTheme}>
            <KeyboardDateTimePicker
                value={selectedDate}
                onChange={handleDateChange}
                // onBlur={handleDataBlur}
                // label="Tanggal"
                placeholder="Masukkan Tanggal (Tahun/Bulan/Tanggal)"
                // variant="inline"
                inputVariant="outlined"
                fullWidth
                // onError={console.log}
                format="yyyy/MM/dd HH:mm"yyyy
                disablePast
            />
        </ThemeProvider>
    </Grid>
</MuiPickersUtilsProvider>

父组件

    state =  {
      selectedFile: null,
      imagePreviewUrl: null,
      err: null,
      title : '',
      highlight : '',
      platform : '',
      start_publish : '',
      end_publish : '',
      sender : '',
      receiver : '',
      action : '',
      status : '',
      bundle : '',
    };


  onTodoChange(value){
        const [date, setSelectedDate] = useState(new Date().getFullYear());
        const newDate = moment().format('yyyy/MM/dd HH:mm').add(value, 'months').calendar();
        setSelectedDate(newDate);
      }

      showBundle = (values) => 
      {
        this.setState({
          bundle : JSON.stringify(values),
        }) 
      };

    render()
    {
      let startPublish = new Date(this.state.start_publish);
      let endPublish = new Date(this.state.end_publish);
      let publish = ((endPublish - startPublish) / (60*60*24*1000));
      let $publishInterval = ('');
      if(publish >= 0)
      {
        $publishInterval = (<div class="form-group row mb-4">
        <label class="col-sm-2 col-form-label">Jarak</label>
          <div class="col-sm-4 text-left">
            <span class="form-control text-left">{publish.toFixed(0)} hari</span>
          </div>
          <label class="col-sm-2 col-form-label">Range</label>
          <div class="col-sm-4 text-left">
          <select class="custom-select" onChange={e => this.onTodoChange(e.target.value)} id="platform"> ////// the selector
              <option value="">Select</option>
              <option value={1}>1 Month</option>
              <option value={3}>3 Month</option>
              <option value={6}>6 Month</option>
            </select>
          </div>
      </div>)
      }

      return (
        <Modal
        {...this.props}
        size="lg"
        onExit={this.handleExit}
        backdrop="static"
        animation={true}
        aria-labelledby="contained-modal-title-vcenter"
        centered
        >
        <form onSubmit={this.handleSubmit} class="was-validated justify-content-center">
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Tambah Notifikasi
            </Modal.Title>
          </Modal.Header>
          <Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}>

            <div class="form-group row mb-4">
              <label class="col-sm-2 col-form-label">Publish Date</label>
              <div class="col-sm-10">
                <MaterialUIPickers required onChange={ (start_publish) => {this.setState( { start_publish })}}></MaterialUIPickers>
              </div>
            </div>

            <div class="form-group row mb-4">
              <label class="col-sm-2 col-form-label">Finish Date</label>
              <div class="col-sm-10">
                <MaterialUIPickers required duration={this.state.duration} onChange={ (end_publish) => {this.setState( { end_publish })}}></MaterialUIPickers>
              </div>
            </div>

            {$publishInterval}

            <div class="form-group row mb-4">
              <label class="col-sm-2 col-form-label">Bundle</label>
                <div class="col-sm-10">
                <Provider store={store}>
                  <FieldArraysForm onChange={this.showBundle}/>
                </Provider>
                </div>
            </div>

          </div>

          </Modal.Body>
          <Modal.Footer>
            <Button variant="danger" onClick={this.handleExit}>Close</Button>
            <Button variant="success" type="submit">Post</Button>
          </Modal.Footer>
        </form>
        </Modal>

      )
    }

选择选择器时如何触发日期选择器的onchange功能？

答案

您可以使用选择的值在日期选择器中设置新值

//use moment to add moths as per your selection 
npm install moment --save 

onTodoChange(value){

 const newDate = moment().format('yyyy/MM/dd HH:mm').add(value, 'months').calendar();
 setSelectedDate(newDate);

}

现在您的日期选择器将根据您的选择更新设置值

和您的

const handleDateChange = (date,value) => {
    setSelectedDate(date); // set new date 
};