CODEWITHSUNDEEP
javascriptreactjsmeteorcomponentsreact-datepicker
Kane
Kane

Reputation: 615

defaultValue is not working in react DatePicker

I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console. console error

    class EditEvent extends React.Component{
        EventUpdate(e){
            e.preventDefault();
            let eventDate = e.target.date.value;
            let myId = this.props.match.params.id;
            Events.update(
                {_id : myId}, 
                {date: eventDate,}, 
                function(err) {
                  if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
                    else{$('.upload-event-from').trigger("reset");}
                }
            );
        }
 constructor(props) {
            super(props);
            this.state = {startDate: ''};
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(date) {
            this.setState({
              startDate: date
            });
        }

          render(){
          const {
            loading,
            updateData,
          } = this.props;

          return loading ? null : (
              <div>
               <PrivateHeader title="Discover Page"/>
                  <form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
                        <div className="form-group fg-icon">
                            <DatePicker
                                defaultValue={updateData.date}
                                className="form-control"
                                id="event_date_time" 
                                name="date"
                                selected={this.state.startDate}
                                onChange={this.handleChange}
                                showTimeSelect
                                timeFormat="HH:mm"
                                timeIntervals={15}
                                dateFormat=""
                                timeCaption="time"
                                autocomplete="off"
                            />
                        </div>
                        <center>
                            <button type="submit" className="btn app-btn">Update</button>
                        </center>
                  </form>
                 <PrivateFooter title="Events Page"/>
              </div>
          );
      }

    }

    export default withTracker((props) => {
        const subscription = Meteor.subscribe('allowedData'); //Dat
        const handle =  props.match.params.id;
        return {
            loading: !subscription.ready(),
            updateData: Events.findOne({_id:handle}),
        };
    })(EditEvent);

Upvotes: 3

Views: 3280

Answers (2)

Nawab Ali
Nawab Ali

Reputation: 590

We can do this using ref on DatePicker component and further assigning it a value using this kind of code. Just look at react.Ref() and as:

this.DateTimePickerElm.current.state.inputValue = newprops.defaultVal;

Upvotes: 0

Igor Słomski
Igor Słomski

Reputation: 71

As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this this.state = {startDate: new Date()};

Upvotes: 3

Related Questions