How to properly create date object for function

Question

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

If I try and set lastDateAccessedHolder to responseData.lastDateAccessed I get date.clone is not a function — PushedCrayon, Jul 25 '18 at 23:53
You need to show the actual value returned by the back end, i.e. the value of *lastDateAccessed*, otherwise any answer is just a guess. You should not use the built-in parser, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) There is no string value that you can pass to the Date constructor that will return anything other than a Date object—it may have a time value of NaN, representing an invalid date, but the object itself will be valid. — RobG, Jul 26 '18 at 00:23
`new Date('2018-09-09')` will return a Date object for 2018-09-09T00:00:00Z in reasonably modern implementations, it will not produce an error so your problem lies elsewhere. — RobG, Jul 26 '18 at 00:28
I added another update to the question with the exact code I am using to try and set lastDateAccessedHolder. — PushedCrayon, Jul 26 '18 at 00:32
are you using this? https://www.npmjs.com/package/react-datepicker — Tyler Sebastian, Jul 26 '18 at 03:44

doodhwala · Answer 1 · 2018-07-26T10:17:16.580

1

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

edited Jul 26 '18 at 10:17

answered Jul 26 '18 at 00:01

doodhwala

358
3
11

I tried to convert the return string to that format and passing it to be a new Date, and then using that new date object and it returns the same error unfortunately. – PushedCrayon Jul 26 '18 at 00:05
I've updated the answer with another link. Let me know if that works for you. If it doesn't, please write the string you are returning. – doodhwala Jul 26 '18 at 00:07
That unfortunately did not work either. I have the error copied but it is too long to paste into the comments. It is still saying date.clone is not a function, and I do not know what it wants me to pass. @doodhwala – PushedCrayon Jul 26 '18 at 00:12
You're welcome! Update the question explaining what happened so that someone else with the same issue can get benefitted. – doodhwala Jul 26 '18 at 00:28
This is not an answer, it might be a comment. If the links answer the question, then this should be marked as a duplicate. – RobG Jul 26 '18 at 00:29
Agreed RobG. I don't have enough rep to comment so I figured I'd respond here. Also, I'm still not sure how the problem was solved. If it was through the links, then we can mark as duplicate. Waiting for OP to post their solution. – doodhwala Jul 26 '18 at 00:32
@PushedCrayon can you look at the error log and see what specific line the error is occurring in? If it is in the new Date(date) line, please log the value of date. – doodhwala Jul 26 '18 at 00:37
@doodhwala when I look into the log, it says the error is occurring on this line: this.setState({lastDateAccessedHolder: done}); – PushedCrayon Jul 26 '18 at 00:38

How to properly create date object for function

1 Answers1