How to calculate date of birth by age? - react-hooks

Question

Have two fields in formik one for age and one for date of birth and one button and I want to calculate date of birth from age . if I give age and enter calculate button. I want to set date of birth. Have write one function but it doesn't work. Can you please help me to get correct answer. Here is following code.
const age = values.age;
const getDisplayDate = (date) => {
if (date === null || date === undefined || date === "") {
return null;
}
let d = typeof date === "string" ? new Date(date) : date;
const year = d.getFullYear() - age;
let month = d.getMonth() + 1;
let day = d.getDate();
if (month < 10) {
month = "0" + month;
}
if (day < 10) {
day = "0" + day;
}
console.log(`day:${day}/month:${month}/year:${year}`);
return `${year}-${month}-${day}`;
};
Here is form :
<div className="form-group col-md-4">
<label htmlFor="age">Age</label>
<Field
type="text"
className={`form-control form-control-sm ${getError(basicInformationError,
basicInformationTouched, "age")
? "is-invalid"
: ""
}`}
id="age"
name="basicInformation.age"
value={basic.age}
placeholder="age"
/>
<ErrorMessage
name="basicInformation.age"
component="div"
className="invalid-feedback"
/>
</div>
<div className="form-group col-md-4">
<div className="row">
{/* <div className="col"> */}
<label htmlFor="date">Date Of Birth</label>
<Field
type="date"
className={`form-control form-control-sm ${getError(
basicInformationError,
basicInformationTouched,
"dateOfBirth"
)
? "is-invalid"
: ""
}`}
id="date"
name="basicInformation.dateOfBirth"
value={getDisplayDate(basic.dateOfBirth) || ""}
// onChange={(e) => setFieldValue(valu)}
placeholder="date"
/>
<ErrorMessage
component="div"
name="basicInformation.dateOfBirth"
className="invalid-feedback"
/>
{/* </div> */}
<button
type="button"
className="btn btn-sm btn btn-info mt-2"
onClick={getDisplayDate}
>
Calculate DOB
</button>
</div>
</div>
Output:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/8xaPn.png

Answer 1

const handleAgeChange = (event) => {
const {
target: { value }
} = event;
handleChange(event);
const date = new Date();
date.setFullYear(date.getFullYear() - Number(value));
setFieldValue("dateOfBirth", date.toLocaleDateString());
};
https://codesandbox.io/s/recursing-bogdan-miip7?file=/index.js
Does it help you?