如何使用Atlassian的日歷組件和reactjs創建日期選擇輸入字段

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期間絕對不會發生任何事情。 我現在想要的只是可以訪問我從“日歷”組件中選擇的任何日期

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而不是CalendarStateless ，而Calendar顯然不能按照我想要的方式進行編輯。 在這里查看更多詳細信息

無論如何，這大致就是最終的組件：

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>
    )
  }
}