I am trying to fix a bug that has appeared in a birthday component in my application. The component gets the date of birth from its props in this format 1997-08-16T00:00:00Z. The issue Im having is that when the DOB is set in the state it is being set as single digits for month and day instead of a two digit month and day. This is what the component looks like handling the DOB:
class DOB extends Component {
constructor(props) {
super(props);
if (props.value) {
const dv = moment(props.value).utc();
this.state = {
year: dv.year(),
month: dv.month() + 1,
day: dv.date()
};
} else {
this.state = { year: "", month: "", day: "" };
}
this.onFieldChanged = this.onFieldChanged.bind(this);
}
onFieldChanged(field) {
return event => {
const newValue = event.target.value;
if (!isDigits(newValue)) {
return;
}
const nextField = {
month: "day",
day: "year"
};
const n = this.refs[nextField[field]];
if (n && newValue.length === 2) {
n.focus();
}
this.setState({ [field]: newValue });
const { year, month, day } = { ...this.state, [field]: newValue };
const dateString = `${year}-${month}-${day}`;
if (year.length < 4 || month < 1 || day < 1) {
return;
}
const date = new Date(Date.parse(dateString));
const today = new Date();
if (date instanceof Date && !isNaN(date.valueOf())) {
if (
date.getFullYear() > 1800 &&
date.getFullYear() <= today.getFullYear() &&
date.getDate() > 0 &&
date.getDate() < 32 &&
date.getMonth() >= 0 &&
date.getMonth() < 12
) {
this.props.onChange({ target: { value: dateString } });
}
}
};
}
return (
<div className="dob-entry">
<input
type="tel"
ref="month"
placeholder="mm"
maxLength="2"
value={state.month}
onChange={this.onFieldChanged("month")}
/>{" "}
/
<input
type="tel"
ref="day"
placeholder="dd"
maxLength="2"
value={state.day}
onChange={this.onFieldChanged("day")}
/>{" "}
/
<input
className="number"
type="tel"
placeholder="yyyy"
ref="year"
maxLength="4"
value={state.year}
onChange={this.onFieldChanged("year")}
/>
</div>
);
}
export default DOB;
Im wondering if it is possible to have the state set to the full two digit values for day and month. In my code dv.year() and dv.month() are setting them to single digits. Ive tried setting the values using const dvf = moment(dv).format('DD/MM/YYYY') and using .splice() to take out the values I need for each field but it seems the backend is expecting the utc values not just a string of numbers. I havent used moment much so there is plenty I dont understand about it however it has to be possible to have it return the 2 digit values right? Any insight would be appreciated.