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?
Share Improve this question asked May 6, 2019 at 12:06 AessandroAessandro 5,77121 gold badges72 silver badges146 bronze badges2 Answers
Reset to default 6Yep, 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>