[DatePicker] allow year selecton to be open before month/day selection

docs/src/app/components/pages/components/DatePicker/ExampleSimple.js

@@ -4,12 +4,14 @@ import DatePicker from 'material-ui/DatePicker';
 /**
  * The Date Picker defaults to a portrait dialog. The `mode` property can be set to `landscape`.
  * You can also disable the Dialog passing `true` to the `disabled` property.
+ * To display the year selection first, set the `openToYearSelection` property to `true`.
  */
 const DatePickerExampleSimple = () => (
   <div>
     <DatePicker hintText="Portrait Dialog" />
     <DatePicker hintText="Landscape Dialog" mode="landscape" />
     <DatePicker hintText="Dialog Disabled" disabled={true} />
+    <DatePicker hintText="Open to Year" openToYearSelection={true} />
   </div>
 );
 

src/DatePicker/Calendar.js

@@ -42,6 +42,7 @@ class Calendar extends Component {
     onTouchTapDay: PropTypes.func,
     onTouchTapOk: PropTypes.func,
     open: PropTypes.bool,
+    openToYearSelection: PropTypes.bool,
     shouldDisableDate: PropTypes.func,
   };
 
@@ -52,6 +53,7 @@ class Calendar extends Component {
     locale: 'en-US',
     minDate: addYears(new Date(), -100),
     maxDate: addYears(new Date(), 100),
+    openToYearSelection: false,
   };
 
   static contextTypes = {
@@ -60,7 +62,7 @@ class Calendar extends Component {
 
   state = {
     displayDate: undefined,
-    displayMonthDay: true,
+    displayMonthDay: undefined,
     selectedDate: undefined,
     transitionDirection: 'left',
     transitionEnter: true,
@@ -70,6 +72,7 @@ class Calendar extends Component {
     this.setState({
       displayDate: getFirstDayOfMonth(this.props.initialDate),
       selectedDate: this.props.initialDate,
+      displayMonthDay: !this.props.openToYearSelection,
     });
   }
 

src/DatePicker/Calendar.spec.js

@@ -3,6 +3,8 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
 import Calendar from './Calendar';
+import CalendarMonth from './CalendarMonth';
+import CalendarYear from './CalendarYear';
 import DateDisplay from './DateDisplay';
 import {addMonths, dateTimeFormat} from './dateUtils';
 import getMuiTheme from '../styles/getMuiTheme';
@@ -223,4 +225,29 @@ describe('<Calendar />', () => {
       assert.strictEqual(wrapper.props().style.width, 310, 'should not allow space for date display');
     });
   });
+
+  describe('initial state', () => {
+    it('should display the month day pick view by default', () => {
+      const wrapper = shallowWithContext(
+        <Calendar
+          DateTimeFormat={dateTimeFormat}
+          locale="en-US"
+        />
+      );
+
+      assert.strictEqual(wrapper.find(CalendarMonth).length, 1, 'should have the calendar month select');
+    });
+
+    it('should display the year selection view when openToYearSelection is true', () => {
+      const wrapper = shallowWithContext(
+        <Calendar
+          DateTimeFormat={dateTimeFormat}
+          locale="en-US"
+          openToYearSelection={true}
+        />
+      );
+
+      assert.strictEqual(wrapper.find(CalendarYear).length, 1, 'should have the year select');
+    });
+  });
 });

src/DatePicker/DatePicker.js

@@ -118,6 +118,10 @@ class DatePicker extends Component {
      * @param {object} event TouchTap event targeting the `TextField`.
      */
     onTouchTap: PropTypes.func,
+    /**
+     * If true sets the datepicker to open to year selection first.
+     */
+    openToYearSelection: PropTypes.bool,
     /**
      * Callback function used to determine if a day's entry should be disabled on the calendar.
      *
@@ -147,6 +151,7 @@ class DatePicker extends Component {
     firstDayOfWeek: 1,
     hideCalendarDate: false,
     style: {},
+    openToYearSelection: false,
   };
 
   static contextTypes = {
@@ -279,6 +284,7 @@ class DatePicker extends Component {
       onFocus, // eslint-disable-line no-unused-vars
       onShow,
       onTouchTap, // eslint-disable-line no-unused-vars
+      openToYearSelection,
       shouldDisableDate,
       hideCalendarDate,
       style,
@@ -319,6 +325,7 @@ class DatePicker extends Component {
           ref="dialogWindow"
           shouldDisableDate={shouldDisableDate}
           hideCalendarDate={hideCalendarDate}
+          openToYearSelection={openToYearSelection}
         />
       </div>
     );

src/DatePicker/DatePickerDialog.js

@@ -28,6 +28,7 @@ class DatePickerDialog extends Component {
     onDismiss: PropTypes.func,
     onShow: PropTypes.func,
     open: PropTypes.bool,
+    openToYearSelection: PropTypes.bool,
     shouldDisableDate: PropTypes.func,
     style: PropTypes.object,
   };
@@ -38,6 +39,7 @@ class DatePickerDialog extends Component {
     container: 'dialog',
     locale: 'en-US',
     okLabel: 'OK',
+    openToYearSelection: false,
   };
 
   static contextTypes = {
@@ -118,6 +120,7 @@ class DatePickerDialog extends Component {
       onAccept, // eslint-disable-line no-unused-vars
       onDismiss, // eslint-disable-line no-unused-vars
       onShow, // eslint-disable-line no-unused-vars
+      openToYearSelection,
       shouldDisableDate,
       hideCalendarDate,
       style, // eslint-disable-line no-unused-vars
@@ -174,6 +177,7 @@ class DatePickerDialog extends Component {
             onTouchTapCancel={this.handleTouchTapCancel}
             onTouchTapOk={this.handleTouchTapOk}
             okLabel={okLabel}
+            openToYearSelection={openToYearSelection}
             shouldDisableDate={shouldDisableDate}
             hideCalendarDate={hideCalendarDate}
           />