How to get defaulValue of YouCanBookMe/react-datetime component?

Question

I am using react-dateTime version"react-datetime": "^2.8.10", I am using default Value. When i click on edit button i get the default value of react-dateTime. but when i update data and i am not changing the datetime.I want that that defaultValue.and when i update data with out changing date-time.i get current date-time.Then in that case how to get that defaultValue. How to get defaultValue of react-DateTime?

renderForm:function(){
    var yesterday = Datetime.moment().subtract( 1, 'day' );
        var valid = function( current ){
        return current.isAfter( yesterday );
        };
        var dateTimeStart=moment(this.props.todo_start_at);
        var dateTimeEnd=moment(this.props.todo_end_at);
        console.log("dateTimeStart ",dateTimeStart)
        console.log("dateTimeEnd ",dateTimeEnd)
    return( 
        <form onSubmit={this.handleUpdate}>
            <input type="text"ref={(value)=>{
                this.input=value
            }}defaultValue={this.props.todo_text}/>
            <div className="column medium-4">
                When To Start
                <Datetime input={ true } isValidDate={ valid } dateFormat="YYYY-MM-DD"  defaultValue= { dateTimeStart }onChange={ this.handleDateTimeStart } />
            </div>
            <div className="column medium-4">
                When To End
                <Datetime input={ true } isValidDate={ valid } dateFormat="YYYY-MM-DD" defaultValue= { dateTimeEnd }onChange={ this.handleDateTimeEnd }  />
            </div>
                <br/>
            <button type="button" className="button" onClick={this.handleUpdate}>Update</button>
        </form>
        )
},

handleupdate

handleUpdate:function(event){
        event.preventDefault();
        //console.log(this.dateTimeStart.value);
        var startDate=this.state.dateTimeStart.value;
        console.log(startDate);
        var todoStartDate= moment(startDate).format('YYYY-MM-DD HH:mm');
        var dueDate=this.state.dateTimeEnd.value;
        var todoEndDate=moment(dueDate).format('YYYY-MM-DD HH:mm');
        console.log("handle update",todoEndDate)
        this.props.editTask(this.props.todo_id,this.input.value,todoStartDate,todoEndDate);
        this.toggleState();
    },

yes..this ishandleUpdate. handleUpdate:function(event){ event.preventDefault(); //console.log(this.dateTimeStart.value); var startDate=this.state.dateTimeStart.value; console.log(startDate); var todoStartDate= moment(startDate).format('YYYY-MM-DD HH:mm'); var dueDate=this.state.dateTimeEnd.value; var todoEndDate=moment(dueDate).format('YYYY-MM-DD HH:mm'); console.log("handle update",todoEndDate) this.props.editTask(this.props.todo_id,this.input.value,todoStartDate,todoEndDate); this.toggleState();}, — Sweety, Jun 07 '17 at 11:04
what's the initial value of `this.state.dateTimeStart` and `this.state.dateTimeEnd` ? — Mayank Shukla, Jun 07 '17 at 11:06
and you are updating these values only when user change these dates ? — Mayank Shukla, Jun 07 '17 at 11:12
and i am using this function for onchage datetimefor end date handleDateTimeEnd: function (newDateTime) { this.setState({ dateTimeEnd: newDateTime }); }, — Sweety, Jun 07 '17 at 11:13
no..its not neccessary. user should update the date. if user does not update or change the dates then i want to get that default value. — Sweety, Jun 07 '17 at 11:15

score 1 · Accepted Answer · answered Jun 07 '17 at 11:16

Reason is, you are initialising the state value by "" (blank value), and updating that when user changes the date, otherwise not. So in that case when user is not updating the value this.state.dateTimeStart.value will be undefined, previous value (default value) will be present in this.props.todo_start_at.

You need to take that default value when user is not doing any change.

Use these line inside handleUpdate method:

var startDate = this.state.dateTimeStart.value || this.props.todo_start_at;
var dueDate = this.state.dateTimeEnd.value || this.props.todo_end_at;

thank you so much sir [@MayankShukla](https://stackoverflow.com/users/5185595/mayank-shukla). you solved my problem. — Sweety, Jun 07 '17 at 11:20

How to get defaulValue of YouCanBookMe/react-datetime component?

1 Answers1