[Datepicker] Redesign datepicker as per material spec

src/DatePicker/Calendar.js

@@ -9,6 +9,7 @@ import CalendarToolbar from './CalendarToolbar';
 import DateDisplay from './DateDisplay';
 import SlideInTransitionGroup from '../internal/SlideIn';
 import ClearFix from '../internal/ClearFix';
+import deprecated from '../utils/deprecatedPropType';
 
 import {
   addDays,
@@ -26,9 +27,7 @@ import {
 
 const daysArray = [...Array(7)];
 
-
-class Calendar extends React.Component {
-
+class Calendar extends Component {
   static propTypes = {
     DateTimeFormat: PropTypes.func.isRequired,
     autoOk: PropTypes.bool,
@@ -47,7 +46,7 @@ class Calendar extends React.Component {
     open: PropTypes.bool,
     shouldDisableDate: PropTypes.func,
     showActionButtons: PropTypes.bool,
-    wordings: PropTypes.object,
+    wordings: deprecated(PropTypes.object, 'Instead, use `cancelLabel` and `okLabel`.'),
   };
 
   static defaultProps = {
@@ -69,7 +68,6 @@ class Calendar extends React.Component {
     selectedDate: undefined,
     transitionDirection: 'left',
     transitionEnter: true,
-    open: true,
   };
 
   componentWillMount() {
@@ -256,22 +254,21 @@ class Calendar extends React.Component {
         flexDirection: 'column',
       },
       calendarContainer: {
-        alignContent: 'space-between',
         display: 'flex',
+        alignContent: 'space-between',
+        justifyContent: 'space-between',
         flexDirection: 'column',
         fontSize: 12,
         fontWeight: 400,
-        height: 'auto',
-        justifyContent: 'space-between',
-        padding: '0px 8px 0px 8px',
+        padding: '0px 8px',
         transition: transitions.easeOut(),
         width: isLandscape ? 294 : 'auto',
       },
       yearContainer: {
         display: 'flex',
+        justifyContent: 'space-between',
         flexDirection: 'column',
         height: 272,
-        justifyContent: 'space-between',
         marginTop: 10,
         overflow: 'hidden',
         width: 310,
@@ -285,9 +282,9 @@ class Calendar extends React.Component {
       weekTitle: {
         display: 'flex',
         flexDirection: 'row',
+        justifyContent: 'space-between',
         fontWeight: '500',
         height: 20,
-        justifyContent: 'space-between',
         lineHeight: '15px',
         opacity: '0.5',
         textAlign: 'center',
@@ -358,7 +355,7 @@ class Calendar extends React.Component {
                   key={this.state.displayDate.toDateString()}
                   minDate={this.props.minDate}
                   maxDate={this.props.maxDate}
-                  onTouchTapDay={this.handleTouchTapDay}
+                  onDayTouchTap={this.handleTouchTapDay}
                   ref="calendar"
                   selectedDate={this.state.selectedDate}
                   shouldDisableDate={this.props.shouldDisableDate}

src/DatePicker/CalendarActionButtons.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, {Component, PropTypes} from 'react';
 import FlatButton from '../FlatButton';
+import deprecated from '../utils/deprecatedPropType';
 
-class CalendarActionButton extends React.Component {
+class CalendarActionButton extends Component {
   static propTypes = {
-    cancelLabel: React.PropTypes.node,
-    okLabel: React.PropTypes.node,
-    onTouchTapCancel: React.PropTypes.func,
-    onTouchTapOk: React.PropTypes.func,
-    wordings: React.PropTypes.object,
+    cancelLabel: PropTypes.node,
+    okLabel: PropTypes.node,
+    onTouchTapCancel: PropTypes.func,
+    onTouchTapOk: PropTypes.func,
+    wordings: deprecated(PropTypes.object, 'Instead, use `cancelLabel` and `okLabel`.'),
   };
 
   render() {
@@ -34,15 +35,13 @@ class CalendarActionButton extends React.Component {
     return (
       <div style={styles.root} >
         <FlatButton
-          key={0}
           label={wordings ? wordings.cancel : cancelLabel}
           onTouchTap={this.props.onTouchTapCancel}
           primary={true}
           style={styles.flatButtons}
         />
         <FlatButton
           disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()}
-          key={1}
           label={wordings ? wordings.ok : okLabel}
           onTouchTap={this.props.onTouchTapOk}
           primary={true}

src/DatePicker/CalendarMonth.js

@@ -1,7 +1,6 @@
 import React, {Component, PropTypes} from 'react';
 import {isBetweenDates, isEqualDate, getWeekArray} from './dateUtils';
 import DayButton from './DayButton';
-import ClearFix from '../internal/ClearFix';
 
 class CalendarMonth extends Component {
   static propTypes = {
@@ -20,7 +19,7 @@ class CalendarMonth extends Component {
   }
 
   handleTouchTapDay = (event, date) => {
-    if (this.props.onTouchTapDay) this.props.onTouchTapDay(event, date);
+    if (this.props.onDayTouchTap) this.props.onDayTouchTap(event, date);
   };
 
   shouldDisableDate(day) {
@@ -36,9 +35,9 @@ class CalendarMonth extends Component {
 
     return weekArray.map((week, i) => {
       return (
-        <ClearFix key={i} style={this.styles.week}>
+        <div key={i} style={this.styles.week}>
           {this.getDayElements(week, i)}
-        </ClearFix>
+        </div>
       );
     }, this);
   }
@@ -69,22 +68,20 @@ class CalendarMonth extends Component {
     root: {
       display: 'flex',
       flexDirection: 'column',
+      justifyContent: 'flex-start',
       fontWeight: 400,
       height: 228,
-      justifyContent: 'flex-start',
       lineHeight: 2,
       position: 'relative',
       textAlign: 'center',
       MozPaddingStart: 0,
-      // backgroundColor: 'cyan',
     },
     week: {
       display: 'flex',
       flexDirection: 'row',
-      height: 34,
       justifyContent: 'space-around',
+      height: 34,
       marginBottom: 2,
-      // backgroundColor: 'yellow',
     },
   };
 

src/DatePicker/CalendarToolbar.js

@@ -6,27 +6,20 @@ import SlideInTransitionGroup from '../internal/SlideIn';
 
 const styles = {
   root: {
-    position: 'relative',
     display: 'flex',
     justifyContent: 'space-between',
     backgroundColor: 'inherit',
     height: 48,
   },
-  title: {
+  titleDiv: {
     fontSize: 14,
     fontWeight: '500',
-    lineHeight: '20px',
-    position: 'relative',
     textAlign: 'center',
-    paddingTop: 12,
     width: '100%',
   },
-  button: {
-    padding: 0,
-    paddingTop: 12,
-    margin: 0,
+  titleText: {
     height: 'inherit',
-    textAlign: 'center',
+    paddingTop: 12,
   },
 };
 
@@ -78,30 +71,28 @@ class CalendarToolbar extends Component {
       year: 'numeric',
     }).format(displayDate);
 
-    const nextButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
-    const prevButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
+    const nextButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronLeft /> : <NavigationChevronRight />;
+    const prevButtonIcon = this.context.muiTheme.isRtl ? <NavigationChevronRight /> : <NavigationChevronLeft />;
 
     return (
       <div style={styles.root}>
         <IconButton
           disabled={!this.props.prevMonth}
           onTouchTap={this.handleTouchTapPrevMonth}
-          style={styles.button}
         >
-          {nextButtonIcon}
+          {prevButtonIcon}
         </IconButton>
         <SlideInTransitionGroup
           direction={this.state.transitionDirection}
-          style={styles.title}
+          style={styles.titleDiv}
         >
-          <div key={dateTimeFormatted} style={{paddingTop: 13}}>{dateTimeFormatted}</div>
+          <div key={dateTimeFormatted} style={styles.titleText}>{dateTimeFormatted}</div>
         </SlideInTransitionGroup>
         <IconButton
           disabled={!this.props.nextMonth}
           onTouchTap={this.handleTouchTapNextMonth}
-          style={styles.button}
         >
-          {prevButtonIcon}
+          {nextButtonIcon}
         </IconButton>
       </div>
     );

src/DatePicker/CalendarYear.js

@@ -8,8 +8,9 @@ class CalendarYear extends Component {
     displayDate: PropTypes.object.isRequired,
     maxDate: PropTypes.object,
     minDate: PropTypes.object,
-    onYearTouchTap: PropTypes.func,
+    onTouchTapYear: PropTypes.func,
     selectedDate: PropTypes.object.isRequired,
+    wordings: PropTypes.object,
   };
 
   static contextTypes = {
@@ -81,7 +82,6 @@ class CalendarYear extends Component {
       overflowX: 'hidden',
       overflowY: 'scroll',
       position: 'relative',
-      textAlign: 'center',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',

src/DatePicker/DateDisplay.js

@@ -12,7 +12,7 @@ function getStyles(props, context, state) {
       width: isLandscape ? 125 : 270,
       height: isLandscape ? 290 : 'auto',
       float: isLandscape ? 'left' : 'none',
-      fontWeight: 'bolder',
+      fontWeight: 700,
       display: 'inline-block',
       backgroundColor: datePicker.selectColor,
       borderTopLeftRadius: 2,
@@ -121,6 +121,7 @@ class DateDisplay extends Component {
       DateTimeFormat,
       locale,
       selectedDate,
+      style,
       ...other,
     } = this.props;
 
@@ -135,7 +136,7 @@ class DateDisplay extends Component {
     }).format(selectedDate);
 
     return (
-      <div {...other} style={prepareStyles(styles.root)}>
+      <div {...other} style={prepareStyles(styles.root, style)}>
         <SlideInTransitionGroup
           style={styles.year}
           direction={this.state.transitionDirection}

src/DatePicker/DatePicker.js

@@ -149,14 +149,12 @@ class DatePicker extends Component {
   };
 
   state = {
-    date: null,
-    dialogDate: null,
+    date: undefined,
   };
 
   componentWillMount() {
     this.setState({
       date: this.isControlled() ? this.getControlledDate() : this.props.defaultDate,
-      dialogDate: new Date(),
     });
   }
 
@@ -283,7 +281,7 @@ class DatePicker extends Component {
           onTouchTap={this.handleTouchTap}
           ref="input"
           style={textFieldStyle}
-          value={this.state.date ? formatDate(this.state.date) : undefined}
+          value={this.state.date ? formatDate(this.state.date) : ''}
         />
         <DatePickerDialog
           DateTimeFormat={DateTimeFormat}

src/DatePicker/DatePickerDialog.js

@@ -5,6 +5,7 @@ import Calendar from './Calendar';
 import Dialog from '../Dialog';
 import Popover from '../Popover/Popover';
 import PopoverAnimationFromTop from '../Popover/PopoverAnimationVertical';
+import deprecated from '../utils/deprecatedPropType';
 import {dateTimeFormat} from './dateUtils';
 
 class DatePickerDialog extends Component {
@@ -24,9 +25,10 @@ class DatePickerDialog extends Component {
     onAccept: PropTypes.func,
     onDismiss: PropTypes.func,
     onShow: PropTypes.func,
+    open: PropTypes.bool,
     shouldDisableDate: PropTypes.func,
     style: PropTypes.object,
-    wordings: PropTypes.object,
+    wordings: deprecated(PropTypes.object, 'Instead, use `cancelLabel` and `okLabel`.'),
   };
 
   static defaultProps = {
@@ -117,8 +119,7 @@ class DatePickerDialog extends Component {
         width: mode === 'landscape' ? 479 : 310,
       },
       dialogBodyContent: {
-        paddingLeft: 0,
-        paddingBottom: 0,
+        padding: 0,
         minHeight: mode === 'landscape' ? 330 : 434,
         minWidth: mode === 'landscape' ? 479 : 310,
       },
@@ -134,7 +135,7 @@ class DatePickerDialog extends Component {
           bodyStyle={styles.dialogBodyContent}
           contentStyle={styles.dialogContent}
           ref="dialog"
-          repositionOnUpdate={false}
+          repositionOnUpdate={true}
           open={open}
           onRequestClose={this.handleRequestClose}
           style={styles.dialogBodyContent}

src/DatePicker/YearButton.js

@@ -15,6 +15,7 @@ function getStyles(props, context, state) {
       margin: '0 auto',
       position: 'relative',
       textAlign: 'center',
+      lineHeight: 'inherit',
       WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
     },
     label: {

src/Dialog/Dialog.js

@@ -142,8 +142,6 @@ function getStyles(props, context) {
       color: dialog.bodyColor,
       padding: `${props.title ? 0 : gutter}px ${gutter}px ${gutter}px`,
       boxSizing: 'border-box',
-      /* padding: gutter,
-      paddingTop: 0,*/
       overflowY: autoScrollBodyContent ? 'auto' : 'hidden',
     },
   };