CODEWITHSUNDEEP
reactjstimepicker
Tripura
Tripura

Reputation: 96

How to set a value to Time Picker dynamically in Reactjs

I am using react time picker(rc-time-picker) in my code, I want to set the time picker value dynamically.

Here is my Time Picker Code

<span id="editstartTime">
     <span class="rc-time-picker timeStylstartTimeAdd">
        <input type="text" class="rc-time-picker-input" readonly="" value=""> 
             <span class="rc-time-picker-icon"></span>
     </span>
</span>

And I tried like this.

$('#editstartTime span input').val(this.state.shifts[index].startTime);

But it did not worked for me.

Please help me to overcome this issue.

Thanks in advance.

Upvotes: 2

Views: 4625

Answers (2)

Krishna Jangid
Krishna Jangid

Reputation: 5410

 const now = moment().hour(0).minute(0);

 <TimePicker
                showSecond={false}
                value={moment().hours(13).minute(1)}
                className="time-picker"
                placeholder="HH:MM"
                onChange={(e) => {
                  console.log(e);
                  console.log(moment(taskCreateFormData.startTime));
                  onTimeChange(e, 'start');
                }}
                format={format}
                use12Hours
              />

if you take format for use12Hours then if you write moment().hours(13).minute(1) time like this then it will convert to PM time format

Upvotes: 0

bakkal
bakkal

Reputation: 55448

TimePicker has a value state of type moment, which holds the current value.

so e.g. if you instantiate with a state called timePickerValue:

<TimePicker value={this.state.timePickerValue} ... />

then you can modify timePickerValue using

this.setState({timePickerValue: newValue})

(In your example newValue would be this.state.shifts[index].startTime)

I suggest you try out this example as it shows how to mutate the TimePicker.value state.

Upvotes: 2

Related Questions