[DatePicker] Add option to hide date display

src/DatePicker/Calendar.js

@@ -31,6 +31,7 @@ class Calendar extends Component {
     cancelLabel: PropTypes.node,
     disableYearSelection: PropTypes.bool,
     firstDayOfWeek: PropTypes.number,
+    hideCalendarDate: PropTypes.bool,
     initialDate: PropTypes.object,
     locale: PropTypes.string.isRequired,
     maxDate: PropTypes.object,
@@ -239,6 +240,7 @@ class Calendar extends Component {
 
   render() {
     const {prepareStyles} = this.context.muiTheme;
+    const {hideCalendarDate} = this.props;
     const toolbarInteractions = this.getToolbarInteractions();
     const isLandscape = this.props.mode === 'landscape';
     const {calendarTextColor} = this.context.muiTheme.datePicker;
@@ -247,7 +249,7 @@ class Calendar extends Component {
       root: {
         color: calendarTextColor,
         userSelect: 'none',
-        width: isLandscape ? 479 : 310,
+        width: (!hideCalendarDate && isLandscape) ? 479 : 310,
       },
       calendar: {
         display: 'flex',
@@ -310,16 +312,18 @@ class Calendar extends Component {
           target="window"
           onKeyDown={this.handleWindowKeyDown}
         />
-        <DateDisplay
-          DateTimeFormat={DateTimeFormat}
-          disableYearSelection={this.props.disableYearSelection}
-          onTouchTapMonthDay={this.handleTouchTapDateDisplayMonthDay}
-          onTouchTapYear={this.handleTouchTapDateDisplayYear}
-          locale={locale}
-          monthDaySelected={this.state.displayMonthDay}
-          mode={this.props.mode}
-          selectedDate={this.state.selectedDate}
-        />
+        {!hideCalendarDate &&
+          <DateDisplay
+            DateTimeFormat={DateTimeFormat}
+            disableYearSelection={this.props.disableYearSelection}
+            onTouchTapMonthDay={this.handleTouchTapDateDisplayMonthDay}
+            onTouchTapYear={this.handleTouchTapDateDisplayYear}
+            locale={locale}
+            monthDaySelected={this.state.displayMonthDay}
+            mode={this.props.mode}
+            selectedDate={this.state.selectedDate}
+          />
+        }
         <div style={prepareStyles(styles.calendar)}>
           {this.state.displayMonthDay &&
             <div style={prepareStyles(styles.calendarContainer)}>

src/DatePicker/Calendar.spec.js

@@ -3,6 +3,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
 import Calendar from './Calendar';
+import DateDisplay from './DateDisplay';
 import {addMonths, dateTimeFormat} from './dateUtils';
 import getMuiTheme from '../styles/getMuiTheme';
 
@@ -193,4 +194,33 @@ describe('<Calendar />', () => {
       assert.notOk(wrapper.find('CalendarToolbar').prop('prevMonth'));
     });
   });
+
+  describe('Date Display', () => {
+    it('should be visible by default', () => {
+      const wrapper = shallowWithContext(
+        <Calendar
+          DateTimeFormat={dateTimeFormat}
+          locale="en-US"
+          mode="landscape"
+        />
+      );
+
+      assert.strictEqual(wrapper.find(DateDisplay).length, 1, 'should show date display');
+      assert.strictEqual(wrapper.props().style.width, 479, 'should allow space for date display');
+    });
+
+    it('should be hidden when hideCalendarDate is set', () => {
+      const wrapper = shallowWithContext(
+        <Calendar
+          DateTimeFormat={dateTimeFormat}
+          locale="en-US"
+          mode="landscape"
+          hideCalendarDate={true}
+        />
+      );
+
+      assert.strictEqual(wrapper.find(DateDisplay).length, 0, 'should hide date display');
+      assert.strictEqual(wrapper.props().style.width, 310, 'should not allow space for date display');
+    });
+  });
 });

src/DatePicker/DatePicker.js

@@ -65,6 +65,10 @@ class DatePicker extends Component {
      * @returns {any} The formatted date.
      */
     formatDate: PropTypes.func,
+    /**
+     * Hide date display
+     */
+    hideCalendarDate: PropTypes.bool,
     /**
      * Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you
      * must provide a `DateTimeFormat` that supports the chosen `locale`.
@@ -141,6 +145,7 @@ class DatePicker extends Component {
     disabled: false,
     disableYearSelection: false,
     firstDayOfWeek: 1,
+    hideCalendarDate: false,
     style: {},
   };
 
@@ -275,6 +280,7 @@ class DatePicker extends Component {
       onShow,
       onTouchTap, // eslint-disable-line no-unused-vars
       shouldDisableDate,
+      hideCalendarDate,
       style,
       textFieldStyle,
       ...other
@@ -312,6 +318,7 @@ class DatePicker extends Component {
           onDismiss={onDismiss}
           ref="dialogWindow"
           shouldDisableDate={shouldDisableDate}
+          hideCalendarDate={hideCalendarDate}
         />
       </div>
     );

src/DatePicker/DatePickerDialog.js

@@ -17,6 +17,7 @@ class DatePickerDialog extends Component {
     containerStyle: PropTypes.object,
     disableYearSelection: PropTypes.bool,
     firstDayOfWeek: PropTypes.number,
+    hideCalendarDate: PropTypes.bool,
     initialDate: PropTypes.object,
     locale: PropTypes.string,
     maxDate: PropTypes.object,
@@ -118,6 +119,7 @@ class DatePickerDialog extends Component {
       onDismiss, // eslint-disable-line no-unused-vars
       onShow, // eslint-disable-line no-unused-vars
       shouldDisableDate,
+      hideCalendarDate,
       style, // eslint-disable-line no-unused-vars
       animation,
       ...other
@@ -127,12 +129,12 @@ class DatePickerDialog extends Component {
 
     const styles = {
       dialogContent: {
-        width: mode === 'landscape' ? 479 : 310,
+        width: (!hideCalendarDate && mode === 'landscape') ? 479 : 310,
       },
       dialogBodyContent: {
         padding: 0,
-        minHeight: mode === 'landscape' ? 330 : 434,
-        minWidth: mode === 'landscape' ? 479 : 310,
+        minHeight: (hideCalendarDate || mode === 'landscape') ? 330 : 434,
+        minWidth: (hideCalendarDate || mode !== 'landscape') ? 310 : 479,
       },
     };
 
@@ -173,6 +175,7 @@ class DatePickerDialog extends Component {
             onTouchTapOk={this.handleTouchTapOk}
             okLabel={okLabel}
             shouldDisableDate={shouldDisableDate}
+            hideCalendarDate={hideCalendarDate}
           />
         </Container>
       </div>