Question

我的日期选择器可以正常工作，并以所需格式（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>
);} }

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

Answer 1

如果要处理时间戳字符串，并且要设置其格式，则一种选择是使用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>
  // ...  
}

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

// in TableRow component:  

import moment from 'moment'

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

Answer 2

假设日期是Date对象，则需要设置其格式。第一次迭代时，您会得到一个类似1/5/2018的日期：

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

我们通过将月份作为数字（一月是0，二月是1，依此类推，所以我们需要加1），添加一个/，添加一个月的日期，添加另一个/，然后是年份。

要将其转换为类似01/05/2018的方式，我们需要将数字填充为0。当然我们可以这样做：

<td>0{{this.props.obj.sDate.getMonth() + 1}}/0{{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.
}

因此，要获取格式，可以执行类似的操作

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

Answer 3

jst试试这个...

import moment from 'moment';

let date='2018-12-31T08:00:00.000Z';

let formatedDate= moment(date).format('MM DD YYYY');

React Date picker问题：如何在表格中以正确的格式显示日期？

3 个答案: