Ответ на вопрос выбора даты: Как отобразить дату в правильном формате в таблице?

Question

My Date прекрасно работает и отображает дату в форме в желаемом формате 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

Предполагая, что дата является 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 2

JST попробуйте это ...

import moment from 'moment';

let date='2018-12-31T08:00:00.000Z';

let formatedDate= moment(date).format('MM DD YYYY');

Answer 3

Если вы имеете дело со строкой метки времени и хотите отформатировать ее, одним из вариантов является использование библиотеки 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>
    }
  }
}