Convert month and year into normal date format in reactjs - reactjs

Question

<DatePicker onChange={this.dateSelect} value={this.state.dateselected} format={"MM/YYYY"} mode="month" picker="month" disabledDate={(current) => {
return moment().add(-4, 'month') >= current;
}} />
date picker didn't shows the value on edit.. We get date as MM/YYYY format from backend. How to display?

Answer 1

You can convert the date using moment when passing the value prop, as:
<DatePicker
value={moment(this.state.dateselected, "YYYY/MM")}
onChange={onChange}
format={"YYYY/MM"}
picker="month"
disabledDate={(current) => {
return moment().add(-4, "month") >= current;
}}
/>
View demo on codesandbox

Answer 2

You need to parse the date components and pass them into the Date() constructor.
const [month, year] = "01/2022".split("/");
const date = new Date(parseInt(year), parseInt(month) - 1);
console.log(date.toString());
// 'Sat Jan 01 2022 00:00:00 GMT-0600 (Central Standard Time)'

Answer 3

you can convert it via dateformat library for example:
1. npm install dateformat
2. import dateFormat from 'dateformat';
3. dateFormat("2022-03-7T08:59:00.000Z", "mmmm dS, yyyy") to get March 7th, 2022
or dateFormat("2022-03-7T08:59:00.000Z", "dddd, mmmm dS, yyyy") to get Tuesday, March 7th, 2022.
https://www.npmjs.com/package/dateformat

Answer 4

I think it gives an error is because new Date() function only accepts a specific format YYYY-MM-DD or YYYY/MM/DD so if your Date is not in that format then it will give you an error.
So what you can do is convert your date into a string and pass date, month, year as arguments. You can use the below code for that.
function convertFromStringToDate(responseDate) {
let dateComponents = responseDate.split('T');
let datePieces = dateComponents[0].split("-");
let timePieces = dateComponents[1].split(":");
return(new Date(datePieces[2], (datePieces[1] - 1), datePieces[0],
timePieces[0], timePieces[1], timePieces[2]))
}
convertFromStringToDate("21-03-2020T11:20:30")