MUI Datetimepicker changing value by using dropdown select

Question

I'm using react datetimepicker and going to use selector to change the value. but it's not changing when i pick an option (for example: i choose 6 month, it will add the finish date for 6 months). Here's my code

Child Component

const handleDateChange = (date,value) => {
    setSelectedDate(date);
    props.onChange(value); //setstate
    if(props.setNewDate != undefined)
    {
      setSelectedDate(props.date);   
      props.setNewDate(date);
      props.onChange(a)
    }
  };
};

<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>

Parent component

    state =  {
      selectedFile: null,
      imagePreviewUrl: null,
      err: null,
      title : '',
      highlight : '',
      platform : '',
      start_publish : '',
      end_publish : '',
      sender : '',
      receiver : '',
      action : '',
      status : '',
      bundle : '',
      initial_date : new Date(),
    };
  setNewDate = (date) => {
        this.setState({ 
          initial_date : date 
        })
      }

onTodoChange(value){
        var start_publish = new Date(this.state.start_publish);
        start_publish.setDate(start_publish.getDate()+(value*30));
        // console.log(start_publish);
        // start_publish.setDate(start_publish.getDate()+(value*30));
        this.setNewDate(start_publish);
        console.log(this.state.initial_date);
      }
      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>

      )
    }

How can I triggered the onchange function of the date picker when I choose the selector?

Answer 1

You can use your selected value to set new value in your datepicker

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

// 1. add date in your parent state like 

const state = { 
  date : 'your initial date'  // like moment().format('yyyy/MM/dd HH:mm');
 }

//2. add function like 

setNewDate = (date) => {
  this.setState{{ date : date }}
}

// 3. onTodoChange function wich accept value and add moth as per value and set new date to state 

onTodoChange(value){

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

}

   // 4. now you can pass it to child component like 

   < Child date={this.state.date} setNewDate={this.setNewDate}  />

Now your datepicker will set value as you have updated using your selection

and in your

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

You can see when you are selecting any value from select then onTodoChange is called which set new date to state so,state is updated and we are using this date in our child so our child date is also updated

Child Component :

const { date , setNewDate } = props;

const handleDateChange = (date,value) => {

     console.log('date',date);
     console.log('value',value);

     setNewDate(date) // if you are getting your date in date / change it to value : this will update your date as you are changing your date in picker 

  };
};

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Grid container justify="space-around">
        <ThemeProvider theme={getMuiTheme}>
            <KeyboardDateTimePicker
                value={date}        // we are directly using date here 
                onChange={handleDateChange} // will change our date in parent component and we are getting new date here 
                // 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>