(Improved) React Datetime Picker
Star Fork

Installation
Install with NPM
Manual download
Usage
Inline Mode

This example shows how to make multilingual date picker which can also support both solar and gregorian modes. Just pay attention to the use of 'moment-jalaali' instead of 'moment' package. If you won't have multilingual and solar date support, you could simply use 'moment' package. (like next examples) 

import React, {Component} from 'react';
import ReactDOM from "react-dom";
import moment from 'moment-jalaali'; // Notice here !

moment.loadPersian({
  dialect: "persian-modern",
  usePersianDigits: true
});

import "imrc-datetime-picker/dist/imrc-datetime-picker.css";
import {DatetimePicker} from 'imrc-datetime-picker';

class App extends Component {
  state = {
    isFa: false,
    isSolar: false
  };
  
  constructor(props) {
    super(props);
    
    // Make sure it's locale is set to english,
    // because you've used moment.loadPersian() function, before.
    const defaultMoment = moment();
    moment.locale();
    
    this.state = {
      moment: defaultMoment
    };
  }

  handleChange = moment => this.setState({ moment });
  
  handleToggleSolar = () => {
    this.setState({
      isSolar: !this.state.isSolar
    });
  };

  handleLangChange = () => {
    const { isFa } = this.state;
    const newIsFa = !isFa;
    this.state.moment.locale(newIsFa ? "fa" : "en");
    this.setState({ isFa: newIsFa });
  };

  render() {
    const { moment, isSolar, isFa } = this.state;
    const dateFormat = isSolar ? "jYYYY/jMM/jDD" : "YYYY/MM/DD";
    
    return (
      <div>
        <span className="text">Datetime: {moment.format(dateFormat)}</span>
        <DatetimePicker
          splitPanel={true}
          moment={this.state.moment}
          onChange={this.handleChange}
          showTimePicker={false}
          isSolar={isSolar}
          lang={isFa ? "fa" : "en"}
        />
        <input
          type="checkbox"
          name="solar"
          defaultChecked={isSolar}
          onChange={this.handleToggleSolar}
        />{" "}
        Solar Date <br />
        <input
          type="checkbox"
          name="fa-lang"
          defaultChecked={isFa}
          onChange={this.handleLangChange}
        />{" "}
        FA (language)
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);
Popup Mode
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import moment from 'moment'; // We don't need 'moment-jalaali' package here

import "imrc-datetime-picker/dist/imrc-datetime-picker.css";
import {DatetimePickerTrigger} from 'imrc-datetime-picker';

class App extends Component {
  state = {
    _moment: moment(),
    cleared: false
  };

  handleChange = (moment) => {
    this.setState({
      _moment: moment,
      cleared: false
    });
  }

  render() {
    const { _moment, cleared } = this.state;
    
    const newMoment = moment();
    
    const shortcuts = {
      'Today': newMoment,
      'Yesterday': newMoment.clone().subtract(1, 'days'),
      'Clear': {
        moment: _moment,
        callback: () => {
          this.setState({ cleared: true });
        }
      }
    };
    const value = !cleared && _moment ? _moment.format("YYYY/MM/DD") : "";
    
    return (
      <DatetimePickerTrigger
        shortcuts={shortcuts} 
        moment={this.state.moment}
        onChange={this.handleChange}
        showTimePicker={false}>
        <input type="text" value={value} readOnly />
      </DatetimePickerTrigger>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

You can also popup the datetime picker to the top position. Everything is similar to the codes above, but just add a 'position' attribute with 'top' value to the 'DatetimePickerTrigger' component. 

...
<DatetimePickerTrigger
  ...
  position="top">
  ...
</DatetimePickerTrigger>
...