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

Question

您好，我正在为我的要求创建 RangeDate 日历。日历运行良好。但是当我提交日期时，它会显示一些数字，如 1,234,245,45,679。例如我选择 01-10-2019 到 12-10-2019 See this

当我提交日期时，它将像这样显示 After submitting

为什么显示数字。如何显示日期类型，如 01-10-2019 到 12-10-2019。请帮助我。我屏蔽了 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 timestamp。要将其显示为日期，您需要将其转换为日期格式。

UNIX 时间戳被广泛使用的原因是因为它们可以同时代表所有时区。

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

使用 momentjs 你可以这样做：

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

希望这可以帮助您解决这个问题。