在生成moment()时遇到问题.utc()返回2位数的月份和年份

Question

我正在尝试修复应用程序中生日组件中出现的一个错误。该组件从其道具中获取出生日期，格式为1997-08-16T00:00:00Z。我遇到的问题是，当DOB设置在该状态时，它被设置为月份和日期的个位数，而不是两位数的月份和日期。这就是组件处理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;

我想知道是否可以将状态设置为天和月的两位数。在我的代码中，dv.year()和dv.month()将它们设置为个位数。我尝试使用const dvf = moment(dv).format('DD/MM/YYYY')和.splice()设置值，以取出每个字段所需的值，但后端似乎期望的是utc值，而不仅仅是一串数字。我用的时间不多，所以有很多我不理解的地方，但必须有可能让它返回2位数的值，对吧？任何见解都将不胜感激。

Answer 1

有很多方法可以解决这个问题，最终由您决定哪种方法最适合您的应用程序。

我自己也不怎么使用moment，但问题是dv.month((和dv.date((返回数值，所以像"08"这样的值变成了8。似乎您希望这些值是2位字符串，因为无法将08存储为数字，所以它总是更改为仅8。

如果您的代码可以将这些值作为字符串处理，那么您只需调整构造函数中状态的设置方式。CCD_ 6可以变成类似于CCD_ 7的东西，然后与CCD_。

或者，您可以在输入日期字符串上使用一些字符串操作，将日期和月份提取为2位字符串。'1997-08-16T00:00:00Z'.slice(0, 10).split('-')[1]将返回"08"，'1997-08-16T00:00:00Z'.slice(0, 10).split('-')[1]将返回"16"。

上面的这些方法意味着您将把日期和月份作为字符串处理，因此您必须确保以后计划在它们上使用的任何方法都能在字符串上工作。

另一种选择是继续将日期和月份存储为数字，然后在将值发送到服务器时将其转换为字符串。

我认为这回答了你的问题？如果我遗漏了什么，请告诉我。