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

Question

All I want is a simple date input field for the user to pick a date. The user clicks on the input field, which opens a calendar (in this case we are using Atlassian), user picks the date and the calendar shuts but keeps the input field with the chosen date.

As it is right now all I have is the calendar component, which I have no idea how to interact with or get the data from and no documentation to tell me how. Here is roughly what my current code is: import Calendar from '@atlaskit/calendar'

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

}

Edit: as was suggested to me, I created the component with an input field and the Calendar, however I still can't grab the values picked from Calendar.

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: I should probably note that absolutely nothing happens during the onSelect and onChange of the Calendar component. All I want at this point is to have access to whatever date I chose from the Calendar component

Answer 1

I would do something like this :

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

This is not perfect code and not perfect but i dont know how to reference your npm stuff in codepen or stackoverflow code editor. See if this works out.

Answer 2

Finally figured it out. Basically had to practically re-write the entire thing and had to user CalendarStateless as opposed to just Calendar which apparently isn't really editable in the way I wanted to be. See more details here

Anyway, this was roughly the resulting component:

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