0

I'm new to React and I've come across 'react suite' which I'm currently using for the DateRangePicker component.

However, I'm struggling to get the start date and end date in a format that is suitable. At the moment I can print in the console the object which looks like this:

enter image description here

Essentially what I would like to do is to print the date in the following format YYYY/MM/DD.

I can imagine that this is probably something straightforward to do, however, I'm struggling to find an appropriate way to do this so any help is appreciated!

My code:

handleSelect(range) {
        console.log(range) 
    }

    render() {
        return (
            <div className="menu">
                <DateRangePicker 
                    onChange = {this.handleSelect}
                />
            </div>
        )
    }
Alvaro Marin
  • 65
  • 1
  • 7
  • 1
    `range[0]` is starting date, `range[1]` is final date, now with these values just convert them to the string you want `yyyy/mm/dd`, maybe using this: https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-ddwith – Calvin Nunes Feb 17 '20 at 18:34
  • Thanks this question did it for me! – Alvaro Marin Feb 17 '20 at 20:07

2 Answers2

1

That library uses JavaScript Dates.

When stringified, e.g. because they are logged, they look the way you see them in the console.

You can either format it by hand, by accessing the components you're interested in via their getters, or use a more sophisticated library that does the heavy lifting for you, e.g. moment.js.

TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
0

You can change your code like this

onSelect={value => {format(value, 'yyyy/MM/dd')}}

Junhee Kim
  • 1
  • 1