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

【问题标题】：How to create a date picking input field using Atlassian's calendar component with reactjs如何使用 Atlassian 的日历组件和 reactjs 创建日期选择输入字段
【发布时间】：2018-04-09 05:30:56
【问题描述】：

我想要的只是一个简单的日期输入字段供用户选择日期。用户点击输入字段，打开日历（在本例中我们使用 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 期间绝对没有发生任何事情。此时我想要的只是访问我从日历组件中选择的任何日期

【问题讨论】：

关于如何做到这一点的一个可能的想法： 1. 制作你自己的反应组件，其中包括一个输入字段和这个日历组件。 2. 基于输入字段的点击，您应该显示日历组件。 3.在输入框的onBlur上，隐藏日历组件。
好的，所以我运行了它，但是我仍然不知道如何实际获取我从日历中选择的值。我将更新我的代码以显示更改。
我需要知道你是怎么称呼这个 DatePicker 的。您已经编辑了代码以使其成为组件，但您仍然如何从 HTML 或任何视图文件中调用 DatePicker 组件？另外，您的 openCalendar 函数在构造函数中没有 bind 方法，并且该组件也没有构造函数。
对不起，我剪掉了一些代码，没有让它变得很长。我认为构造函数只是隐含的，但它就在那里。 DatePicker 组件正在另一个组件中被调用，该组件将是一个表单（充满其他字段）。为什么 openCalendar 需要绑定？我目前正在使用箭头功能，就显示日历而言，它按预期工作。

标签： javascript reactjs datepicker calendar atlaskit

【解决方案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 内容。看看这是否可行。

【讨论】：

该代码将接近我想要做的理想，但是我无法触发 Calendar 组件上的 onChange。不管我在里面放什么，什么都不会发生。
那么你能在你的问题中发布控制台错误吗？
@theJuls 你确定开发者控制台中一定有一些东西吗？
是的，当我尝试选择日期时，绝对不会出现任何内容。
我已经弄清楚并发布了解决方案，以防其他人需要它。基本上必须完全改变组件，使用 CalendarStateless 代替 Calendar 并手动实现与日历本身相关的事件。

【解决方案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>
    )
  }
}

【讨论】：