如何使用具有reactjs的Atlassian日历组件创建日期选择输入字段

Question

我想要的只是一个简单的日期输入字段供用户选择日期。用户单击输入字段，打开日历（在本例中我们使用的是Atlassian），用户选择日期并关闭日历，但保留输入字段的所选日期。

因为现在我所拥有的只是日历组件，我不知道如何与之交互或从中获取数据，也没有文档告诉我如何。这大致是我目前的代码：从'@ atlaskit / calendar'导入日历

export default class DateInputForm {
  render () {
    return (
      <div>
        <form>
          <Calendar 
            onSelect={()=> {console.warn('do something!!)}}
            onChange={()=> {console.warn('do something!!)}}/>
        </form>
      </div>
    )
  }

}

编辑：正如我所建议的那样，我使用输入字段和日历创建了组件，但是我仍然无法获取从日历中选取的值。

export default class DatePicker extends React.Component {
  static propTypes ={
    value: PropTypes.string
  }
  constructor (props) {
    super(props)

    this.state = {
      calendarOpened: false
    }
  }

  openCalendar () {
    this.setState({calendarOpened: true})
  }

  render () {
    const { value } = this.props
    return (
      <div>
        <input
        value={value || 'yyyy-mm-dd'}
        onClick={() => this.openCalendar()} />
        {this.state.calendarOpened
          ? <Calendar
            onSelect={() => {console.warn('do something!!)}}
            onChange={() => {console.warn('do something!!)}}/>
          : null}
      </div>
    )
  }
}

Edit2：我应该注意，在Calendar组件的onSelect和onChange期间绝对没有任何反应。此时我想要的是访问我从Calendar组件中选择的任何日期

Answer 1

我会做这样的事情：

class DatePicker extends React.Component {
  constructor(props) {
    super(props);
    this.openCalendar = this.openCalendar.bind(this);
    this.changeDate = this.changeDate.bind(this);
    this.state = {
      calendarOpened: false,
      selectedDate: null,
    };
}

changeDate(event) {
  this.setState ({
  selectedDate: event.value
  )};
}

openCalendar() {
  this.setState({
    calendarOpened: true,
  });
}
render () {
const { value } = this.props;
return (
  <div>
    <input
    value={this.state.selectedDate || 'yyyy-mm-dd'}
    onClick={() => this.openCalendar()} />
    {this.state.calendarOpened
      ? <Calendar
        onChange={this.changeDate}/>
      : null}
  </div>
)
}
}

这不是完美的代码，并不完美，但我不知道如何在codepen或stackoverflow代码编辑器中引用你的npm东西。看看这是否成功。

Answer 2

终于想通了。基本上必须重新编写整个事情，并且不得不使用CalendarStateless，而不仅仅是Calendar，这显然不像我想要的那样可编辑。 See more details here

无论如何，这大致是由此产生的组成部分：

import {CalendarStateless} from '@atlaskit/calendar'

export default class DatePicker extends React.Component {
  static propTypes ={
    value: PropTypes.string,
    onChange: PropTypes.func.isRequired
  }
  constructor (props) {
    super(props)

    this.state = {
      calendarOpened: false,
      selected: [],
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear()
    }
  }
  // this is for the actual date selection
  selectDate (evt) {
    this.setState({ selected: evt.iso, calendarOpened: false })
  }
  // this is to display different months or years
  // without it we would only have one calendar page
  changeInfo ({ day, month, year }) {
    this.setState({ day, month, year })
  }

  openCalendar () {
    this.setState({calendarOpened: true})
  }

  render () {
    const { value } = this.props
    return (
      <div>
        <input
        value={value || ''}
        placeholder='yyyy-mm-dd'
        onClick={() => this.openCalendar()} />
        {this.state.calendarOpened
          ? <CalendarStateless
            selected={this.props.value}
            day={this.state.day}
            month={this.state.month}
            year={this.state.year}
            onSelect={(evt) => this.selectDate(evt)}
            onChange={date => this.changeInfo(date)}/>
          : null}
      </div>
    )
  }
}