Question

import React, { Component } from 'react'
import DatePicker from 'material-ui/DatePicker';
class Balaa extends Component {
  state = {
   first:'',
   second:'',
  }
  handleChangeFirstEventDate = (event, date) => {
    this.setState({
      first: date,
    });
  }
  handleChangeSecondDate = (event, date) => {
    this.setState({
      second: date,
    });
  }
  render() {
    const { value } = this.state
    <label> First Date </label>
    <DatePicker
       fullWidth={true}
       name='firstdate'
       placeholder='YYYY-MM-DD'
       value={this.state.first}
       onChange={this.handleChangeFirstEventDate}
    />
    <label> Second Date </label>
    <DatePicker
       fullWidth={true}
       name='second'
       placeholder='YYYY-MM-DD'
       value={this.state.second}
       onChange={this.handleChangeSecondDate}
    />
    <label> Multiple Date </label>
    <DatePicker
       fullWidth={true}
       name='multipledate'
       placeholder='YYYY-MM-DD'
       value={...} //show the first and second date together
       disabled />
  }
}
export default Balaa

基本理念是。我想要一个可以显示第一个和第二个日期的字段。一开始，我使用TestField来展示，但我发现这个字段是在2017年11月11日星期一＆＃34;。我希望它是xxxx-xx-xx格式。该字段仅显示功能。无法更改此字段的值。所以我将disabled设置为不允许用户更改值。例如，我选择的第一个是2017-11-27，第二个是2017-11-28。我希望现场显示2017-11-27; 2017-11-28。我刚开始学习反应。

Answer 1

您可以使用TextField并根据需要格式化值：

import TextField from 'material-ui/TextField'

<TextField
  disabled
  value={`${this.state.first},${this.state.second}`}
/>

要格式化值，您可以使用momentjs：

moment(this.state.first).format('YYYY-MM-DD')。

所以最后的结果是：

const formatDate = (date) => moment(date).format('YYYY-MM-DD')

<TextField
  disabled
  value={`${formatDate(this.state.first)},${formatDate(this.state.second)}`}
/>

如何在同一个字段中显示两个值

1 个答案: