Difference in Months between two dates in React.js using KeyboardDatePicker - html

Question

const Index = (props) => {
const [selectedDate, setSelectedDate] = useState(
new Date("2014-08-18T21:11:54")
);
const handleDateChange = (date) => {
setSelectedDate(date);
};
return (
<div>
//first date picker
<MuiPickersUtilsProvider
utils={DateFnsUtils}
// className={classes.formControlNew}
style={{ width: "100%" }}
>
<KeyboardDatePicker
style={{ marginLeft: "5%", width: "91%" }}
margin="normal"
id="date-picker-dialog1"
label="Start Date"
format="MM/dd/yyyy"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
// second date picker
<MuiPickersUtilsProvider
utils={DateFnsUtils}
style={{ width: "100%" }}
>
<KeyboardDatePicker
style={{ marginLeft: "5%", width: "91%" }}
margin="normal"
id="date-picker-dialog2"
label="End Date"
format="MM/dd/yyyy"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
</div>
);
};
There are two date pickers using which I am taking two dates from user .In which first date is start date & second is End Date . I want to calculate difference between these two dates in months.How should i get the difference in months ? What are the calculations need to be done in Reactjs .

Answer 1

There are a few things missing here.
You are going to want to duplicate selectedDate and handleDateChange so that you can keep track of the two dates separately. Perhaps selectedStartDate and selectedEndDate
To calculate the difference, I would recommend using the moment npm package with syntax similar to:
const months = moment.duration(moment(selectedEndDate).diff(moment(selectedStartDate))).asMinutes()