React js中显示范围日历日期的问题

Question

嗨，我正在为我的需求创建RangeDate日历。日历运行良好。但当我提交日期时，它会显示一些数字，比如123424545679。例如，我选择了01-10-2019到12-10-2019参见本

当我提交日期时，它将显示如下提交后

为什么它显示数字。如何显示日期类型，如2019年10月1日至2019年12月20日，请帮助我。我封锁了2天。

我的代码是

class RangeCalender extends Component {
constructor(props) {
super(props);
const date = new Date()
const startDate = date.getTime()
this.state = {
startDate, // Today
endDate: new Date(startDate).setDate(date.getDate() + 6) // Today + 6 days
};
}
onChange = (startDate, endDate) => this.setState({ startDate, endDate })
sendData = (newMessage) => {
addUserMessage(this.state.startDate.toLocaleString())
console.log(this.state.startDate.toLocaleString());
}
render = () => {
const {trigger, startDate, endDate } = this.state
return (
<div>
<ReactLightCalendar startDate={startDate} endDate={endDate} onChange={this.onChange} range 
displayTime />
<button class = "Rcbutton"  onClick={() => this.sendData()}>Submit </button>
</div>
)
}
}

事实上，我是React js的新手。请帮我

提前感谢

Answer 1

它显示的是数字，因为日期存储为UNIX时间戳。要将其显示为日期，您需要将其转换为日期格式。

UNIX时间戳之所以被广泛使用，是因为它们可以同时表示所有时区。

有很多方法可以实现这种转换。就我个人而言，我在ReactJS中的大部分日期处理都使用moment.js。

使用momentjs，你可以做这样的事情：

var dateAsString = moment.unix(value).format("MM-DD-YYYY");

希望这能帮助你解决这个问题。