4

I'm trying to set selected parameter as default date of DatePicker of react-datepicker. Basically date which I'm getting from database is in following format:

event_date: "2019-06-15"

and when I set state, that date shows in this way - event_date: "2019-06-15T00:00:00"

I have tried to new Date() for converting it into JavaScript compatible date. Also tried MomentJS but then also it's throwing same error. When I call new Date() in selected parameter then everything works perfectly. I mean, DatePicker shows default todays date. But when I try to set custom date value to DatePicker, it throws error - RangeError: Invalid time value.

Can anyone tell me what type of data DatePicker need for setting custom date?

Improve this question

4 Answers 4

Reset to default
12

It seems your date is in string format. Datepicker don't accept string date.

You need to parse the string date to actual date using parseISO

import { parseISO } from 'date-fns'

Usage,

parseISO(your_custom_date)
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I would consider it an unnecessary overhead to import something solely for a purpose that can be achieved with vanilla JS methods.
@ravibagul91 it still didn't work. It still showing same error.
Your code worked perfectly but you haven't passed 'DD/MM/YYYY' to format() function in your demo. Below is your code items[i].event_date = moment(this.state.eventList[i].event_date).format(); Below is my code items[i].event_date = moment(this.state.eventList[i].event_date).format('DD/MM/YYYY'); Check I have edited your code... It has thrown error.
Yes. I haven't pass the format, because Datepicker need date in format 2019-06-15T00:00:00 (Date with Time) and doing ` moment(this.state.eventList[i].event_date).format('DD/MM/YYYY')` will only give date and not time, so the error for time.
You can directly avoid updateAllDates function. Because date from DB is in correct format but a string, you just need to parse that string date to actual date.
|
6

React-datepicker requires an instance of Date to be passed for configuration values such as startDate, etc. (or possibly it also excepts timestamp integers, not sure).

You can use

new Date(Date.parse("2019-06-15T00:00:00"));

To create a date instance. Date.parse() recognizes many date string formats and converts them to timestamp values which in turn are accepted by the Date() constructor.

Improve this answer

6 Comments

Thank you. It worked perfectly. But I have issue, when I try to parse value using Date.parse() which is converted from momentjs, it throws RangeError: Invalid time value. I have followed this answer - for successful API call. But it's working only for single index 0. Do I need to use state instead of single index?
Can you show an example of value that fails with Date.parse()?
Value that fails is in format of DD/MM/YYYY e.g. 22/08/2019
Problem is that either I can convert date with momentjs or I can convert date with Date.parse(). I couldn't convert both dates at once. What would be the problem?
You showed one example date string format in the question and never mentioned you're dealing with various formats. My answer was valid in that regard.
|
2

You can use latest date-fns library in Javascript and use below for format

import { format, parseISO } from 'date-fns' 

format(parseISO(DateinISOformat), "MMM dd h:m a")

Example below -

format(parseISO('2019-06-15T00:00:00'), "MMM dd h:m a")
Improve this answer

Comments

-1

This worked for me.

import { format, parseISO } from "date-fns"; 
<div>{format(parseISO(dateofbirth, 'yyyy-MM-dd', new Date()), "do MMM yyy")}</div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.