Does this work with react?

[jr69]

And if it does, how would one import it and use it as a component?

[ccldd]

It's vanilla js so you can import it as is or wrap it as a component.

I had troubles importing the npm version though. Webpack complains about missing tokens. So i used the
.js file in /dist.

[joews]

@lcc15 The 1.0.1 release has a couple of issues including the one you found. A 2.0.0 release which fixes imports for all bundlers is due soon - just waiting for the npm ownership to be transferred to me.

[joews]

You can use this library like any vanilla JS component: define your own React component that wraps this one. Briefly, something like this:

import React from 'react';
import MaterialDateTimePicker from 'material-datetime-picker';

class DatePicker extends React.Component {
  
  // this component makes its own DOM updates, so tell React not to make any changes
  shouldComponentUpdate() {
    return false;
  }

  // use any values from `nextProps` to update the picker state, for example:
  componentWillReceiveProps(nextProps) {
    this.picker.set(nextProps.newDate);
  }

  // the container element has been added to the DOM, so create the picker
  // shouldComponentUpdate returns false, so this is only called once
  componentDidMount() {
    this.picker = new MaterialDateTimePicker({
      container: this.container
    });
  }

  // create the picker's wrapper component
  // shouldComponentUpdate returns false, so this is only called once
  render() {
    return <div ref={el => this.container = el}>;
  }
}