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");

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

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

1 个答案: