DatePicker.js

import React, { Component } from 'react'
import mobiscroll from '@mobiscroll/react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'

import TextInput from 'components/TextInput'

mobiscroll.settings = {
  theme: 'material',
  themeVariant: 'light',
}

class DatePicker extends Component {
  constructor(props) {
    super(props)
    this.state = { date: undefined }
  }

  showPicker = () => {
    this.picker.instance.show()
  }

  setPicker = comp => {
    this.picker = comp
  }

  render() {
    const { classes } = this.props
    const { date } = this.state
    console.log('DATE', date)
    return (
      <>
        <TextInput
          className={classes.root}
          type="text"
          name="dob"
          label="Date of Birth"
          InputLabelProps={{ shrink: true, required: false }}
          placeholder="mm/dd/yyyy"
          onClick={this.showPicker}
          // value={date}
        />
        <mobiscroll.Date
          ref={this.setPicker}
          buttons={['cancel', 'set']}
          touchUi={false}
          placeholder="Please add a date"
          showOnTap={false}
          showOnFocus={false}
          display="center"
          className={classes.mobiscrollInput}
          onSet={function() {
            console.log('TRIGGERED ON SET')
          }}
        />
      </>
    )
  }
}

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: 0,
    marginBottom: theme.margins.md,
  },
  mobiscrollInput: {
    display: 'none',
  },
})

DatePicker.propTypes = {
  classes: PropTypes.object,
}

export default withStyles(styles)(DatePicker)