@gyurist/material-ui-pickers v1.0.0-rc.1

Material-UI pickers

Components, that implements material design date and time pickers for material-ui v1

Click here for demo

Recently updated?

Changelog available here

Installation

Available as npm package.

npm install material-ui-pickers -S

Now choose the library that pickers will use to work with date. We are providing interfaces for moment and date-fns. If you are not using moment in the project (or dont have it in the bundle already) we suggest using date-fns, because it much more lightweight and will be correctly tree-shaked from the bundle.

Teach pickers how to use one of that library using MuiPickersUtilsProvider. This component takes an utils property, and makes it available down the React tree thanks to React context. It should preferably be used at the root of your component tree.

import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import MomentUtils from 'material-ui-pickers/utils/moment-utils';
import DateFnsUtils from 'material-ui-picker/utils/date-fns-utils'

function App() {
  return ( 
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

render(<App />, document.querySelector('#app'));

We are using material-ui-icons icon font to display icons. Just add this to your html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If you dont want to use icon font, or you are already use material-ui-icons you can pass any icon to the components with corresponding props

Usage

Here is a quick example of how to use this package

import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers'

class App extends Component {
  state = {
    selectedDate: new Date(),
    selectedTime: new Date(),
    selectedDateTime: new Date()
  }

  handleDateChange = date => {
    this.setState({ selectedDate: date })
  }

  handleTimeChange = time => {
    this.setState({ selectedTime: time })
  }

  handleDateTimeChange = dateTime => {
    this.setState({ selectedDateTime: dateTime })
  }

  render() {
    const { selectedDate, selectedTime, selectedDateTime } = this.state

    return (
      <div>
        <DatePicker
          value={selectedDate}
          onChange={this.handleDateChange}
        />

        <TimePicker
          value={selectedTime}
          onChange={this.handleTimeChange}
        />

        <DateTimePicker
          value={selectedDateTime}
          onChange={this.handleDateTimeChange}
        />
      </div>
    )
  }
}

Props documentation

Here is a list of available props

Note: Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.

Datepicker

• date - string, number, Date object or Moment object (if you are using moment utils)

Timepicker

DateTimepicker

Contributing

For information about how to contribute, see the CONTRIBUTING file.

LICENSE

The project is licensed under the terms of MIT license