如何使用带有 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：我可能应该注意到，在日历组件的 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 或 Whosebug 代码编辑器中引用你的 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>
    )
  }
}

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

How to create a date picking input field using Atlassian's calendar component with reactjs

javascript

calendar

datepicker

reactjs

atlaskit