CODEWITHSUNDEEP
javascriptreactjsdatedatepicker
PushedCrayon
PushedCrayon

Reputation: 123

How to properly create date object for function

I have a date picker for a field on my form that allows the user to select a date. When the form is submitted, the date object is parsed into a string of the correct format that the backend API requires. When I try and GET an object to populate the form with, the return type for that input field comes back as a string. If I try and pass the string in, the page will crash.

The exact issue happens when the API returns a string variable that is supposed to fill in the input field shown below. The program currently throws an error that date.clone is not a function.

Can someone help me figure out how to pass the string date from the backend in such a way that it will be shown on the front end correctly?

This is the function that takes in the date object and creates the string for the backend. The backend returns lastDateAccessed as a string, and lastDateAccessedHolder is what is visible in the input field.

handleDateChange(date) {
    this.setState({ lastDateAccessedHolder: date });

    var lastDate = new Date(date);
    var day = lastDate.getDate();
    if(day.toString().length === 1)
    {
        day = '0' + day;
    }

    var month = lastDate.getMonth() + 1;
    if(month.toString().length === 1)
    {
        month = '0' + month;
    }

    var year = lastDate.getFullYear();
    this.setState(
        {lastDateAccessed: year+"-"+month+"-"+day},
        () => console.log(this.state.lastDateAccessed)
    );
}

This is the line where the datepicker is used, and the input field is shown: 

<DatePicker selected={this.state.lastDateAccessedHolder} onChange={this.handleDateChange}/>

UPDATE: The backend will return responseData.lastDateAccessed. This variable will hold a date like '2018-09-09' or '2016-12-03'.

UPDATE 2: The code I am running in the GET function from the API is: 

var dateString = responseData.lastDateAccessed;
     var finalDate = dateString.split('-');
     var done = new Date(finalDate[0], finalDate[1] - 1, finalDate[2]);
     this.setState({lastDateAccessedHolder: done});

Error: 

index.js:318 Uncaught TypeError: date.clone is not a function
at safeDateFormat (index.js:318)
at DatePicker._this.renderDateInput (index.js:2844)
at DatePicker.render (index.js:2916)
at finishClassComponent (react-dom.development.js:8389)
at updateClassComponent (react-dom.development.js:8357)
at beginWork (react-dom.development.js:8982)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:11318)
at renderRoot (react-dom.development.js:11885)
at performWorkOnRoot (react-dom.development.js:12449)
at performWork (react-dom.development.js:12370)
at performSyncWork (react-dom.development.js:12347)
at requestWork (react-dom.development.js:12247)
at scheduleWorkImpl (react-dom.development.js:12122)
at scheduleWork (react-dom.development.js:12082)
at Object.enqueueSetState (react-dom.development.js:6644)
at addAsset../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:238)
at addAsset.js:71

Upvotes: 0

Views: 2673

Answers (1)

doodhwala
doodhwala

Reputation: 358

This answer assumes that you just need the date.

Ensure that the string returned by the GET request follows the ISO Format: YYYY-MM-DD

For more details, you can refer these answers - link 1 and link 2

Update: on some more digging up, I came across this issue which suggests packing the date using moment as suggested in one of the comments

<DatePicker
  className={styles.datePicker}
  selected={moment(this.props.endDate)}
  onChange={this.handleChangeEnd}
/>

Upvotes: 1

Related Questions