DatePicker

docs/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "material-ui": "^1.0.0-beta.13",
+    "material-ui": "^1.0.0`-beta.13",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-scripts": "1.0.14"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3002 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

docs/src/App.js

@@ -5,7 +5,16 @@ import './App.css';
 
 
 class App extends Component {
+  state = {
+    selectedDate: new Date()
+  }
+
+  handleDateChange = date => {
+    this.setState({ selectedDate: date })
+  }
+
   render() {
+    const { selectedDate } = this.state
     return (
       <div className="root">
          <AppBar position="static">
@@ -25,7 +34,12 @@ class App extends Component {
           </Typography>
 
           <div className="main-picker">
-            <DateTimePicker />
+            <DateTimePicker 
+              disableFuture
+              value={selectedDate}
+              onChange={this.handleDateChange}
+              animateYearScrolling={false}
+            />
           </div>
         </main>
       </div>

package.json

@@ -5,14 +5,20 @@
   "main": "dist/index.js",
   "peerDependencies": {
     "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "prop-types": "^15.6.0",
-    "material-ui": "^1.0.0-beta.13"
+    "material-ui": "^1.0.0-beta.13",
+    "classnames": "^2.2.5"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "material-ui": "^1.0.0-beta.13",
+    "moment": "^2.18.1",
+    "moment-range": "^3.0.3",
     "peer-deps-externals-webpack-plugin": "^1.0.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "webpack": "^3.5.1"
   },
   "scripts": {

src/DatePicker/Calendar.jsx

@@ -0,0 +1,118 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, IconButton } from 'material-ui';
+
+import Moment from 'moment';
+import { extendMoment } from 'moment-range';
+import classnames from 'classnames';
+import CalendarHeader from './CalendarHeader';
+
+const moment = extendMoment(Moment);
+
+class Calendar extends PureComponent {
+  static propTypes = {
+    date: PropTypes.shape({}).isRequired,
+    classes: PropTypes.shape({}).isRequired,
+    onChange: PropTypes.func.isRequired,
+    disableFuture: PropTypes.bool.isRequired,
+  }
+
+  state = {
+    currentMonth: this.props.date.clone().startOf('month'),
+  }
+
+  onDateSelect = (day) => {
+    this.props.onChange(day);
+  }
+
+  handleChangeMonth = (newMonth) => {
+    this.setState({ currentMonth: newMonth });
+  }
+
+  renderWeeks = () => {
+    const { currentMonth } = this.state;
+    const start = currentMonth.clone().startOf('week');
+    const end = currentMonth.clone().endOf('month').endOf('week');
+
+    return Array.from(moment.range(start, end).by('week'))
+      .map(week => (
+        <div key={`week-${week.toString()}`} className={this.props.classes.week}>
+          { this.renderDays(week) }
+        </div>
+      ));
+  }
+
+  renderDays = (week) => {
+    const { disableFuture, classes, date } = this.props;
+    const end = week.clone().endOf('week');
+    const currentMonthNumber = this.state.currentMonth.get('month');
+
+    return Array.from(moment.range(week, end).by('day'))
+      .map((day) => {
+        const dayClass = classnames(classes.day, {
+          [classes.hidden]: day.get('month') !== currentMonthNumber,
+          [classes.selected]: day.toString() === date.toString(),
+          [classes.disabled]: disableFuture && day.isAfter(moment()),
+        });
+
+        return (
+          <IconButton
+            key={day.toString()}
+            className={dayClass}
+            onClick={() => this.onDateSelect(day)}
+          >
+            <span> { day.format('DD')} </span>
+          </IconButton>
+        );
+      });
+  }
+
+  render() {
+    const { currentMonth } = this.state;
+    const { classes } = this.props;
+
+    return (
+      <div className={classes.container}>
+        <CalendarHeader
+          currentMonth={currentMonth}
+          onMonthChange={this.handleChangeMonth}
+        />
+
+        <div className={classes.calendar}>
+          { this.renderWeeks() }
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  calendar: {
+    marginTop: 10,
+  },
+  hidden: {
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  day: {
+    width: 36,
+    height: 36,
+    fontSize: 14,
+    margin: '0 2px',
+    color: theme.palette.text.primary,
+  },
+  selected: {
+    color: theme.palette.primary[700],
+    backgroundColor: theme.palette.primary[200],
+  },
+  disabled: {
+    pointerEvents: 'none',
+    color: theme.palette.text.hint,
+  },
+  week: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+export default withStyles(styles)(Calendar);

src/DatePicker/CalendarHeader.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { withStyles, IconButton } from 'material-ui';
+
+const CalendarHeader = (props) => {
+  const { classes, currentMonth, onMonthChange } = props;
+
+  const selectNextMonth = () => onMonthChange(currentMonth.clone().add(1, 'months'));
+  const selectPreviousMonth = () => onMonthChange(currentMonth.clone().subtract(1, 'months'));
+
+  return (
+    <div>
+      <div className={classes.switchHeader}>
+        <IconButton onClick={selectPreviousMonth}>
+          keyboard_arrow_left
+        </IconButton>
+
+        <div className={classes.monthName}>
+          { currentMonth.format('MMMM YYYY')}
+        </div>
+
+        <IconButton onClick={selectNextMonth}>
+            keyboard_arrow_right
+        </IconButton>
+      </div>
+
+      <div className={classes.daysHeader}>
+        { moment.weekdaysMin().map(day => (
+          <div className={classes.dayLabel}> { day } </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CalendarHeader.propTypes = {
+  currentMonth: PropTypes.object.isRequired,
+  onMonthChange: PropTypes.func.isRequired,
+  classes: PropTypes.object,
+};
+
+const styles = theme => ({
+  switchHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: '10px 0 20px',
+  },
+  daysHeader: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dayLabel: {
+    width: 36,
+    margin: '0 2px',
+    fontSize: 13,
+    textAlign: 'center',
+    color: theme.palette.text.hint,
+  },
+});
+
+export default withStyles(styles)(CalendarHeader);
+