Correct way to use DatePicker in React

[Kaisaurus]

I am not sure how to apply the DatePicker Javascript in a React project.

(I think the problems might lie in my understanding of how to use the new operator in combination with the es6 import..)

This is my current code:

import React, { Component } from 'react'
import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar.min'

export default class DatePicker extends Component {
  render() {
    const datePicker = new bulmaCalendar(this.datePickerElem, {
      startDate: new Date(), // Date selected by default
      dateFormat: 'yyyy-mm-dd', // the date format `field` value
      lang: 'en', // internationalization
      overlay: false,
      closeOnOverlayClick: true,
      closeOnSelect: true,
      // callback functions
      onSelect: null,
      onOpen: null,
      onClose: null,
      onRender: null
    })
    return (
      <div>
        <input ref={this.datePickerElem} class="input" type="text" />
      </div>
    )
  }
}

Which gives me this error: Error: An invalid selector or non-DOM node has been provided.

[haflinger]

Hi. Try this :

<input
  className="input"
  type="text"
  ref={node => {
    const datePicker = new bulmaCalendar(node, {
      startDate: new Date(), // Date selected by default
      dateFormat: 'yyyy-mm-dd', // the date format `field` value
      lang: 'en', // internationalization
      overlay: false,
      closeOnOverlayClick: true,
      closeOnSelect: true,
      // callback functions
      onSelect: null,
      onOpen: null,
      onClose: null,
      onRender: null
    });
  }}
/>

[stevensacks]

@Kaisaurus @haflinger I rewrote this lib from the ground up for use in React, leveraging his great SASS styling, but made specifically for React.

I've open-sourced the code here: https://gist.github.com/stevensacks/79c60d0f8b1f8bc06b475438f59d687e

Note that my implementation uses my Dialog as a Promise component, which is also open-source (and linked to). You can use that also if you like. But if you don't, you're free to modify DatePicker.js to use whatever methodology you prefer. This is why I haven't turned it into standalone "npm install" library.

Hope you find it useful!