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

Changelog available here

Available as npm package

npm install material-ui-pickers -S

We have moment in the peer dependencies, so if you are not using moment

npm install moment -S

We are using material-ui-icons 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 the following props

• leftArrowIcon - arrow left for datepicker
• rightArrowIcon - arrow right for datepicker
• dateRangeIcon - date tab icon for datetimepicker
• timeIcon - time tab icon for datetimepicker

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>
    )
  }
}

Here is a list of available props

• date - string, number, Date object, Moment object (anything, that can be parsed by moment)

For l10n texts we're currently relying on moment which is stateful. To change the locale you have to import your langauge specific files an change the locale manually via moment.locale(language).

import moment from 'moment'
import 'moment/locale/fr';
 
moment.locale('fr')

If you are interested of using moment or date-fns as the peer of this project, please mention that in this issue, we need to know which libriry if more useful to be in the peer dependencies of this project. Thank you.

1. 24 hour displaying for timepicker (now supporting only am/pm)

They would be added/fixed in one of the nearest release :)

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

The project is licensed under the terms of MIT license