Reactjs 反应日期选择器问题：如何在表中以适当的格式显示日期？

“我的日期选择器”工作正常，并以所需格式（即MM/DD/YYYY）在表单中显示日期。这是我的代码：

createEvent.js如下所示：

<div className="form-group">
   <label>Select Date: </label>
    <br></br>
    <DatePicker
      selected={ this.state.startDate }
      onChange={ this.handleChange }
    />
</div>   

选择日期：

但是，当我在表格中显示它时，它会以长字符串形式显示日期，如2018-12-31T08:00:00.000Z

以下是我的TableA.js代码：

class TableRow extends Component {
    render() {
     return (
       <tr>
        {this.props.obj.eventname}
      </td>
      <td>
        {this.props.obj.sDate}
      </td>
    </tr>
);} }

类TableRow扩展组件{
render（）{
返回(
{this.props.obj.eventname}
{this.props.obj.sDate}
);} }

---

有没有一种方法可以正确地显示这个？我曾尝试在表中使用sDate.toString（）以及sDate.toLocaleDateString（），但我的应用程序无法识别这两个命令，并给出错误消息。我是否需要在table.js中包含一个库

如果您正在处理时间戳字符串，并且希望对其进行格式化，一个选项是使用MomentJS库，该库作为

moment

npm包提供

将此代码安装到应用程序中的一个策略可能是：

// in CreateEvent component: 

handleChange = event => {
  const aMomentObject = moment(event.target.value)  
  const aFormattedString = aMomentObject.format("MM/DD/YYYY")

  let obj = this.state.obj
  obj.sDateFormatted = aFormattedString

  this.setState({ obj: obj})
}

// in TableRow component

render () {
  // ...
  <td>{ this.props.obj.sDateFormatted }</td>
  // ...  
}

//在CreateEvent组件中：
handleChange=事件=>{
常量amontObject=时刻（event.target.value）
常量aformatedString=amontObject.format（“MM/DD/YYYY”）
设obj=this.state.obj
obj.sDateFormatted=未格式化的字符串
this.setState（{obj:obj}）
}
//表内行组件
渲染（）{
// ...
{this.props.obj.sDateFormatted}
// ...  
}

或者，如果不想通过添加属性使状态复杂化，可以在呈现值时执行转换，如：

// in TableRow component:  

import moment from 'moment'

class TableRow extends Component {
  render() {
    return (
      // ...
      <td>{ moment(this.state.obj.sDate).format("MM/DD/YYYY") }</td>
    }
  }
}

//在TableRow组件中：
从“时刻”导入时刻
类TableRow扩展组件{
render（）{
返回(
// ...
{矩（this.state.obj.sDate）.format（“MM/DD/YYYY”）}
}
}
}

假设日期是一个

日期

对象，则需要对其进行格式化。作为第一次迭代，这将得到一个类似

1/5/2018

的日期：

<td>{{this.props.obj.sDate.getMonth() + 1}}/{{this.props.obj.sDate.getDate()}}/this.props.obj.sDate.getYear()}}</td>

但是两位数会导致像

012/012/2018

这样的日期，这更糟糕。为了避免这个问题，我们可以检查数字是否为

=

9。为了让它更易于阅读，我也将它作为函数编写

function formatDate(d) {
  var month = d.getMonth() + 1;
  var day = d.getDate();
  var year = d.getYear;

  var out = month < 10 ? '0' : ''; // If the month < 10, start with a 0
  out = out + month + '/'; // Add the month to the string and a slash
  out = out + (day < 10 ? '0' : ''); // Add a 0 if day < 10
  out = out + day + '/' + year; // Finish it off with the rest of the day and year.
}

函数格式日期（d）{
变量月份=d.getMonth（）+1；
var day=d.getDate（）；
var year=d.getYear；
var out=month<10？'0'：“”；//如果月份<10，则以0开头
out=out+month+'/'；//将月份添加到字符串和斜杠中
out=out+（天<10？'0'：''）；//如果天<10，则添加一个0
out=out+day+'/'+year；//结束这一天和这一年剩下的时间。
}

因此，要获得格式，可以执行以下操作

<td>{{ formatDate(this.props.obj.sDate) }}</td>

{{formatDate（this.props.obj.sDate）}

jst试试这个

从“时刻”导入时刻；
出租日期='2018-12-31T08:00:00.000Z'；
让formattedate=moment（date）。format（'MM-DD-YYYY'）；

更改TableRow组件的第二个解决方案对我有效。只需将“state”更改为“props”

<td>{{ formatDate(this.props.obj.sDate) }}</td>