React Date picker question: Как отобразить дату в правильном формате в таблице?
Мой выбор даты работает нормально и отображает дату в форме в желаемом формате: ММ / ДД / ГГГГ. Это мой код:
createEvent.js выглядит следующим образом:
<div className = "form-group">
<label>Select Date: </label>
<br></br>
<DatePicker
selected = { this.state.startDate }
onChange = { this.handleChangeEvent }
/>
</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?
Ответы 3
Если вы имеете дело со строкой отметки времени и хотите ее отформатировать, один из вариантов - использовать библиотеку MomentJS, доступную как пакет moment npm.
Одна из стратегий для установки этого кода в ваше приложение может быть следующей:
// in CreateEvent component:
handleChangeEvent = 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>
}
}
}
Предполагая, что дата является объектом 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>
jst попробуйте это ...
import moment from 'moment';
let date='2018-12-31T08:00:00.000Z';
let formatedDate= moment(date).format('MM DD YYYY');
Второе решение по замене компонента TableRow сработало для меня. Просто нужно было изменить "состояние" на "реквизит"