如何解决无法让 moment().utc() 返回 2 位数的月份和年份
我正在尝试修复在我的应用程序的生日组件中出现的错误。组件以这种格式 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 位数的值,对吗?任何见解将不胜感激。
解决方法
有多种方法可以解决此问题,最终由您决定哪种方法最适合您的应用程序。
我自己也没有经常使用 moment,但问题是 dv.month() 和 dv.date() 返回数值,所以像 '08' 这样的东西变成了 8。看来你想要这些值是 2 位字符串,因为无法将 08 存储为数字,它总是会更改为 8。
如果您的代码可以处理这些字符串值,您可以简单地调整在构造函数中设置状态的方式。 day: dv.date()
可以变成类似 day: dv.date() > 9 ? dv.date().toString() : '0' + dv.date()
的东西,然后用 month
做类似的事情。
或者,您可以对输入的日期字符串使用一些字符串操作,将日期和月份提取为 2 位字符串。 '1997-08-16T00:00:00Z'.slice(0,10).split('-')[1]
将返回“08”,'1997-08-16T00:00:00Z'.slice(0,10).split('-')[1]
将返回“16”。
上述这些方法意味着您将把日期和月份作为字符串来处理,因此您必须确保以后计划在它们上使用的任何方法都适用于字符串。
另一种选择是继续将日期和月份存储为数字,然后在您将值发送到服务器时将它们转换为字符串。
我认为这回答了你的问题?如果我遗漏了什么,请告诉我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。