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?

Rohit Sawai
  • 739
  • 1
  • 11
  • 28

4 Answers4

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)
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
  • I would consider it an unnecessary overhead to import something solely for a purpose that can be achieved with vanilla JS methods. – marekful Aug 21 '19 at 14:56
  • 1
    @ravibagul91 it still didn't work. It still showing same error. – Rohit Sawai Aug 21 '19 at 15:17
  • 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. – Rohit Sawai Aug 22 '19 at 05:48
  • 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. – ravibagul91 Aug 22 '19 at 05:54
  • 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. – ravibagul91 Aug 22 '19 at 05:56
  • That code has set custom date. But how can I change date now as in selected attribute I have - `selected={this.state.eventList && this.state.eventList.length > 0 && parseISO(this.state.eventList[0].event_date)}` . How can I track date selected by user? – Rohit Sawai Aug 27 '19 at 08:43
  • this crap of tool does not know how to convert dd/mm/yyyy – Игор Ташевски Mar 15 '22 at 22:11
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.

marekful
  • 14,986
  • 6
  • 37
  • 59
  • 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](https://stackoverflow.com/a/57592478) - for successful API call. But it's working only for single index 0. Do I need to use state instead of single index? – Rohit Sawai Aug 21 '19 at 15:30
  • Can you show an example of value that fails with Date.parse()? – marekful Aug 21 '19 at 17:25
  • Value that fails is in format of DD/MM/YYYY e.g. 22/08/2019 – Rohit Sawai Aug 22 '19 at 03:29
  • 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? – Rohit Sawai Aug 22 '19 at 04:30
  • 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. – marekful Aug 22 '19 at 09:37
  • I forgot to mention that. I have edited my question. – Rohit Sawai Aug 22 '19 at 11:00
1

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")
Jayanth Kumar T
  • 308
  • 4
  • 9
-1

This worked for me.

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