I have the following ponent:

import React, {Component, Fragment} from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// import PropTypes from 'prop-types';

class Form extends Component {
    state = { 
        selected: new Date()
    }

    handleChange = date => {
        console.log('date: ', date)
        this.setState({
            selected: date
        });
    }

    render() { 
        const {selected} = this.state;
        return (
            <Fragment>
                <form>
                    <DatePicker
                        dateFormat="dd/MM/yyyy" 
                        onChange={this.handleChange} 
                        selected={selected}
                    />
                    <button>search</button>
                </form>
            </Fragment>
        );
    }
}

export default Form;

when I select any date from the datepicker I get the following format:

date: Wed May 15 2019 12:54:33 GMT+0100 (British Summer Time)

can this be parsed back to a format like:

2019-05-15/yyyy-mm-dd

as I will need it to submit in that format for an API call?

I have the following ponent:

import React, {Component, Fragment} from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// import PropTypes from 'prop-types';

class Form extends Component {
    state = { 
        selected: new Date()
    }

    handleChange = date => {
        console.log('date: ', date)
        this.setState({
            selected: date
        });
    }

    render() { 
        const {selected} = this.state;
        return (
            <Fragment>
                <form>
                    <DatePicker
                        dateFormat="dd/MM/yyyy" 
                        onChange={this.handleChange} 
                        selected={selected}
                    />
                    <button>search</button>
                </form>
            </Fragment>
        );
    }
}

export default Form;

when I select any date from the datepicker I get the following format:

date: Wed May 15 2019 12:54:33 GMT+0100 (British Summer Time)

can this be parsed back to a format like:

2019-05-15/yyyy-mm-dd

as I will need it to submit in that format for an API call?

• javascript
• reactjs
• react-datepicker

2 Answers 2

Yep, most easily by using an established library such as momentjs.

Then you can parse the date into whatever format you like as such:

date = moment(date).format("YYYY-MM-DD")

I use the following with Inertia.

const { data, setData, post, processing, errors } = useForm({ 
// ...
start_date: null,
        end_date: null,
});
    
    function handleStartDate(date) {
        setData("start_date", date);
    }

// the form...
<div className="mt-4">
                    <DatePicker 
                        name="start_date" 
                        selected={ new Date() } 
                        onChange={ (date) => handleStartDate(date) }
                        shouldCloseOnSelect={ false }
                        dateFormat="YYYY-MM-dd" 
                        placeholderText="Start Date" 
                    />
                </div>