Control when you want to focus initial date in Calendar

docs/prop-types.json

@@ -247,6 +247,17 @@
             "computed": false
           }
         },
+        "shouldFocusDateInitially": {
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "Props to disable initial focused date",
+          "defaultValue": {
+            "value": "true",
+            "computed": false
+          }
+        },
         "utils": {
           "type": {
             "name": "object"
@@ -3461,4 +3472,4 @@
       }
     }
   ]
-}
+}

lib/src/DatePicker/Calendar.d.ts

@@ -25,6 +25,7 @@ export interface CalendarProps {
     renderDay?: RenderDay;
     utils?: Utils<MaterialUiPickersDate>;
     shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+    shouldFocusDateInitially?: boolean;
 }
 
 declare const Calendar: ComponentClass<CalendarProps>;

lib/src/DatePicker/Calendar.jsx

@@ -26,6 +26,7 @@ export class Calendar extends Component {
     renderDay: PropTypes.func,
     theme: PropTypes.object.isRequired,
     shouldDisableDate: PropTypes.func,
+    shouldFocusDateInitially: PropTypes.bool,
     utils: PropTypes.object.isRequired,
     allowKeyboardControl: PropTypes.bool,
   };
@@ -40,6 +41,7 @@ export class Calendar extends Component {
     renderDay: undefined,
     allowKeyboardControl: false,
     shouldDisableDate: () => false,
+    shouldFocusDateInitially: true,
   };
 
   state = {
@@ -57,6 +59,11 @@ export class Calendar extends Component {
     return null;
   }
 
+  state = {
+    currentMonth: this.props.utils.getStartOfMonth(this.props.date),
+    shouldFocusDate: this.props.shouldFocusDateInitially,
+  };
+
   componentDidMount() {
     const {
       date, minDate, maxDate, utils, disableFuture, disablePast,
@@ -78,6 +85,8 @@ export class Calendar extends Component {
   onDateSelect = (day, isFinish = true) => {
     const { date, utils } = this.props;
 
+    this.setState({ shouldFocusDate: true });
+
     const withHours = utils.setHours(day, utils.getHours(date));
     const withMinutes = utils.setMinutes(withHours, utils.getMinutes(date));
 
@@ -184,21 +193,23 @@ export class Calendar extends Component {
 
   renderDays = (week) => {
     const { date, renderDay, utils } = this.props;
+    const { currentMonth, shouldFocusDate } = this.state;
 
     const selectedDate = utils.startOfDay(date);
-    const currentMonthNumber = utils.getMonth(this.state.currentMonth);
+    const currentMonthNumber = utils.getMonth(currentMonth);
     const now = utils.date();
 
     return week.map((day) => {
       const disabled = this.shouldDisableDate(day);
       const dayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
+      const isSelectedDate = utils.isSameDay(selectedDate, day) && shouldFocusDate;
 
       let dayComponent = (
         <Day
           current={utils.isSameDay(day, now)}
           hidden={!dayInCurrentMonth}
           disabled={disabled}
-          selected={utils.isSameDay(selectedDate, day)}
+          selected={isSelectedDate}
         >
           {utils.getDayText(day)}
         </Day>

lib/src/DatePicker/DatePicker.d.ts

@@ -18,6 +18,7 @@ export interface DatePickerProps {
     renderDay?: RenderDay;
     utils?: Utils<MaterialUiPickersDate>;
     shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+    shouldFocusDateInitially?: boolean;
 }
 
 declare const DatePicker: ComponentClass<DatePickerProps>;

lib/src/DatePicker/DatePicker.jsx

@@ -24,6 +24,7 @@ export class DatePicker extends PureComponent {
     renderDay: PropTypes.func,
     utils: PropTypes.object.isRequired,
     shouldDisableDate: PropTypes.func,
+    shouldFocusDateInitially: PropTypes.bool,
     allowKeyboardControl: PropTypes.bool,
   }
 
@@ -40,6 +41,7 @@ export class DatePicker extends PureComponent {
     rightArrowIcon: undefined,
     renderDay: undefined,
     shouldDisableDate: undefined,
+    shouldFocusDateInitially: true,
   }
 
   state = {
@@ -82,6 +84,7 @@ export class DatePicker extends PureComponent {
       renderDay,
       utils,
       shouldDisableDate,
+      shouldFocusDateInitially,
       allowKeyboardControl,
     } = this.props;
     const { showYearSelection } = this.state;
@@ -132,6 +135,7 @@ export class DatePicker extends PureComponent {
                 renderDay={renderDay}
                 utils={utils}
                 shouldDisableDate={shouldDisableDate}
+                shouldFocusDateInitially={shouldFocusDateInitially}
                 allowKeyboardControl={allowKeyboardControl}
               />
         }
@@ -141,4 +145,3 @@ export class DatePicker extends PureComponent {
 }
 
 export default withUtils()(DatePicker);
-

lib/src/DatePicker/DatePickerWrapper.d.ts

@@ -18,6 +18,7 @@ export interface DatePickerWrapperProps extends BasePickerProps, Omit<ModalWrapp
   rightArrowIcon?: ReactNode;
   renderDay?: RenderDay;
   shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+  shouldFocusDateInitially: boolean;
 }
 
 declare const DatePickerWrapper: ComponentClass<DatePickerWrapperProps>;

lib/src/DatePicker/DatePickerWrapper.jsx

@@ -24,6 +24,8 @@ export const DatePickerWrapper = (props) => {
     renderDay,
     rightArrowIcon,
     shouldDisableDate,
+    shouldFocusDateInitially,
+    utils,
     value,
     ...other
   } = props;
@@ -72,6 +74,7 @@ export const DatePickerWrapper = (props) => {
               renderDay={renderDay}
               rightArrowIcon={rightArrowIcon}
               shouldDisableDate={shouldDisableDate}
+              shouldFocusDateInitially={shouldFocusDateInitially}
             />
           </ModalWrapper>
         )
@@ -114,6 +117,7 @@ DatePickerWrapper.propTypes = {
   /** Enables keyboard listener for moving between days in calendar */
   allowKeyboardControl: PropTypes.bool,
   forwardedRef: PropTypes.func,
+  shouldFocusDateInitially: PropTypes.bool,
 };
 
 DatePickerWrapper.defaultProps = {
@@ -133,6 +137,7 @@ DatePickerWrapper.defaultProps = {
   labelFunc: undefined,
   shouldDisableDate: undefined,
   forwardedRef: undefined,
+  shouldFocusDateInitially: true,
 };
 
 export default React.forwardRef((props, ref) => (

lib/src/DateTimePicker/DateTimePicker.d.ts

@@ -24,6 +24,7 @@ export interface DateTimePickerProps {
   renderDay?: RenderDay;
   utils?: Utils<MaterialUiPickersDate>;
   shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+  shouldFocusDateInitially?: boolean;
 }
 
 declare const DateTimePicker: ComponentClass<DateTimePickerProps>;

lib/src/DateTimePicker/DateTimePicker.jsx

@@ -38,6 +38,12 @@ export class DateTimePicker extends Component {
     showTabs: PropTypes.bool,
     timeIcon: PropTypes.node,
     utils: PropTypes.object.isRequired,
+    ampm: PropTypes.bool,
+    shouldDisableDate: PropTypes.func,
+    shouldFocusDateInitially: PropTypes.bool,
+    animateYearScrolling: PropTypes.bool,
+    fadeTimeout: PropTypes.number.isRequired,
+    classes: PropTypes.object.isRequired,
   }
 
   static defaultProps = {
@@ -52,6 +58,8 @@ export class DateTimePicker extends Component {
     renderDay: undefined,
     rightArrowIcon: undefined,
     shouldDisableDate: undefined,
+    animateYearScrolling: false,
+    shouldFocusDateInitially: true,
     showTabs: true,
     timeIcon: undefined,
   }
@@ -119,6 +127,7 @@ export class DateTimePicker extends Component {
       utils,
       ampm,
       shouldDisableDate,
+      shouldFocusDateInitially,
       animateYearScrolling,
       fadeTimeout,
       classes,
@@ -175,6 +184,7 @@ export class DateTimePicker extends Component {
               renderDay={renderDay}
               utils={utils}
               shouldDisableDate={shouldDisableDate}
+              shouldFocusDateInitially={shouldFocusDateInitially}
             />
           </View>
 

lib/src/DateTimePicker/DateTimePickerWrapper.d.ts

@@ -23,6 +23,7 @@ export interface DateTimePickerWrapperProps extends BasePickerProps, Omit<ModalW
   timeIcon?: ReactNode;
   renderDay?: RenderDay;
   shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;
+  shouldFocusDateInitially?: boolean;
 }
 
 declare const DateTimePickerWrapper: ComponentClass<DateTimePickerWrapperProps>;

lib/src/DateTimePicker/DateTimePickerWrapper.jsx

@@ -27,6 +27,7 @@ export const DateTimePickerWrapper = (props) => {
     renderDay,
     ampm,
     shouldDisableDate,
+    shouldFocusDateInitially,
     animateYearScrolling,
     fadeTimeout,
     forwardedRef,
@@ -83,6 +84,7 @@ export const DateTimePickerWrapper = (props) => {
               renderDay={renderDay}
               rightArrowIcon={rightArrowIcon}
               shouldDisableDate={shouldDisableDate}
+              shouldFocusDateInitially={shouldFocusDateInitially}
               showTabs={showTabs}
               timeIcon={timeIcon}
             />
@@ -138,6 +140,7 @@ DateTimePickerWrapper.propTypes = {
   /** Enables keyboard listener for moving between days in calendar */
   allowKeyboardControl: PropTypes.bool,
   forwardedRef: PropTypes.func,
+  shouldFocusDateInitially: PropTypes.bool,
 };
 
 DateTimePickerWrapper.defaultProps = {
@@ -161,6 +164,7 @@ DateTimePickerWrapper.defaultProps = {
   animateYearScrolling: false,
   fadeTimeout: 400,
   forwardedRef: undefined,
+  shouldFocusDateInitially: true,
   allowKeyboardControl: true,
 };
 
@@ -172,4 +176,3 @@ const styles = {
 
 const EnhancedWrapper = withStyles(styles, { name: 'MuiPickerDTPickerModal' })(DateTimePickerWrapper);
 export default React.forwardRef((props, ref) => <EnhancedWrapper {...props} forwardedRef={ref} />);
-

lib/src/_shared/DateTextField.d.ts

@@ -24,6 +24,7 @@ export interface DateTextFieldProps extends Omit<TextFieldProps, 'onChange' | 'v
     invalidDateMessage?: React.ReactNode;
     clearable?: boolean;
     TextFieldComponent?: React.ComponentType<TextFieldProps>;
+    shouldFocusDateInitially?: boolean;
 }
 
 declare const DateTextField: ComponentClass<DateTextFieldProps>;

lib/src/_shared/DateTextField.jsx

@@ -124,6 +124,7 @@ export class DateTextField extends PureComponent {
     adornmentPosition: PropTypes.oneOf(['start', 'end']),
     /** Callback firing when date that applied in the keyboard is invalid  */
     onError: PropTypes.func,
+    shouldFocusDateInitially: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -151,6 +152,7 @@ export class DateTextField extends PureComponent {
     TextFieldComponent: TextField,
     InputAdornmentProps: {},
     adornmentPosition: 'end',
+    shouldFocusDateInitially: true,
   }
 
 
@@ -280,6 +282,7 @@ export class DateTextField extends PureComponent {
       onClear,
       onClick,
       TextFieldComponent,
+      shouldFocusDateInitially,
       utils,
       value,
       ...other

lib/src/wrappers/ModalWrapper.jsx

@@ -40,6 +40,7 @@ export default class ModalWrapper extends PureComponent {
     onSetToday: PropTypes.func,
     children: PropTypes.node.isRequired,
     dialogContentClassName: PropTypes.string,
+    shouldFocusDateInitially: PropTypes.bool,
     isAccepted: PropTypes.bool.isRequired,
   }
 
@@ -61,6 +62,7 @@ export default class ModalWrapper extends PureComponent {
     onOpen: undefined,
     onClose: undefined,
     onSetToday: undefined,
+    shouldFocusDateInitially: true,
   }
 
   state = {
@@ -152,6 +154,7 @@ export default class ModalWrapper extends PureComponent {
       onOpen,
       onClose,
       onSetToday,
+      shouldFocusDateInitially,
       isAccepted,
       ...other
     } = this.props;