Add today and clear buttons for inline pickers

lib/src/DatePicker/DatePickerInline.tsx

@@ -52,6 +52,8 @@ export const DatePickerInline: React.SFC<DatePickerInlineProps> = props => {
         handleChange,
         handleTextFieldChange,
         handleAccept,
+        handleSetTodayDate,
+        handleClear,
       }) => (
         <InlineWrapper
           disableFuture={disableFuture}
@@ -65,6 +67,8 @@ export const DatePickerInline: React.SFC<DatePickerInlineProps> = props => {
           value={value}
           isAccepted={isAccepted}
           handleAccept={handleAccept}
+          onSetToday={handleSetTodayDate}
+          onClear={handleClear}
           {...other}
         >
           <ComponentToShow

lib/src/DateTimePicker/DateTimePickerInline.tsx

@@ -52,6 +52,8 @@ export const DateTimePickerInline: React.SFC<
         isAccepted,
         pick12hOr24hFormat,
         handleAccept,
+        handleClear,
+        handleSetTodayDate,
       }) => (
         <InlineWrapper
           innerRef={forwardedRef}
@@ -67,6 +69,8 @@ export const DateTimePickerInline: React.SFC<
             utils.dateTime12hFormat,
             utils.dateTime24hFormat
           )}
+          onSetToday={handleSetTodayDate}
+          onClear={handleClear}
           {...other}
         >
           <DateTimePicker

lib/src/TimePicker/TimePickerInline.tsx

@@ -35,6 +35,8 @@ export const TimePickerInline: React.SFC<TimePickerInlineProps> = props => {
         isAccepted,
         pick12hOr24hFormat,
         handleAccept,
+        handleClear,
+        handleSetTodayDate,
       }) => (
         <InlineWrapper
           innerRef={forwardedRef}
@@ -43,6 +45,8 @@ export const TimePickerInline: React.SFC<TimePickerInlineProps> = props => {
           isAccepted={isAccepted}
           handleAccept={handleAccept}
           format={pick12hOr24hFormat(utils.time12hFormat, utils.time24hFormat)}
+          onSetToday={handleSetTodayDate}
+          onClear={handleClear}
           {...other}
         >
           <TimePicker

lib/src/_shared/BasePicker.tsx

@@ -87,8 +87,7 @@ export class BasePicker extends React.Component<
 
   public handleAccept = () => this.props.onChange(this.state.date);
 
-  public handleSetTodayDate = () =>
-    this.handleChange(this.props.utils.date(), false);
+  public handleSetTodayDate = () => this.handleChange(this.props.utils.date());
 
   public handleTextFieldChange = (date: MaterialUiPickersDate) => {
     const { onChange, utils, mergePreviousDateOnChange } = this.props;

lib/src/wrappers/InlineWrapper.tsx

@@ -1,7 +1,10 @@
+import Button from '@material-ui/core/Button';
+import DialogActions from '@material-ui/core/DialogActions';
 import Popover, {
   PopoverProps as PopoverPropsType,
 } from '@material-ui/core/Popover';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
+import classnames from 'classnames';
 import keycode from 'keycode';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -12,6 +15,10 @@ import DomainPropTypes from '../constants/prop-types';
 export interface OuterInlineWrapperProps extends Partial<DateTextFieldProps> {
   onOpen?: () => void;
   onClose?: () => void;
+  onSetToday?: () => void;
+  showTodayButton?: boolean;
+  clearLabel?: React.ReactNode;
+  todayLabel?: React.ReactNode;
   PopoverProps?: Partial<PopoverPropsType>;
 }
 
@@ -45,6 +52,11 @@ export class InlineWrapper extends React.PureComponent<
     keyboard: PropTypes.bool,
     classes: PropTypes.object.isRequired,
     innerRef: PropTypes.any,
+    showTodayButton: PropTypes.bool,
+    clearLabel: PropTypes.node.isRequired,
+    clearable: PropTypes.bool.isRequired,
+    todayLabel: PropTypes.node.isRequired,
+    onSetToday: PropTypes.func.isRequired,
   };
 
   public static defaultProps = {
@@ -58,6 +70,10 @@ export class InlineWrapper extends React.PureComponent<
     PopoverProps: undefined,
     isAccepted: false,
     keyboard: undefined,
+    showTodayButton: false,
+    clearable: false,
+    clearLabel: 'Clear',
+    todayLabel: 'Today',
   };
 
   public static getDerivedStateFromProps(nextProps: InlineWrapperProps) {
@@ -106,6 +122,19 @@ export class InlineWrapper extends React.PureComponent<
     event.preventDefault();
   };
 
+  public handleSetTodayDate = () => {
+    if (this.props.onSetToday) {
+      this.props.onSetToday();
+    }
+  };
+
+  public handleClear = () => {
+    this.close();
+    if (this.props.onClear) {
+      this.props.onClear();
+    }
+  };
+
   public render() {
     const {
       value,
@@ -119,6 +148,11 @@ export class InlineWrapper extends React.PureComponent<
       onlyCalendar,
       classes,
       handleAccept,
+      showTodayButton,
+      clearable,
+      clearLabel,
+      todayLabel,
+      onSetToday,
       ...other
     } = this.props;
 
@@ -154,9 +188,38 @@ export class InlineWrapper extends React.PureComponent<
             vertical: 'top',
             horizontal: keyboard ? 'right' : 'center',
           }}
-          children={children}
           {...PopoverProps}
-        />
+        >
+          <React.Fragment>
+            {children}
+
+            <DialogActions
+              classes={{
+                root:
+                  clearable || showTodayButton
+                    ? classes.dialogActions
+                    : undefined,
+                action: classnames(classes.dialogAction, {
+                  [classes.clearableDialogAction]: clearable,
+                  [classes.todayDialogAction]: !clearable && showTodayButton,
+                }),
+              }}
+            >
+              {clearable && (
+                <Button color="primary" onClick={this.handleClear}>
+                  {clearLabel}
+                </Button>
+              )}
+
+              {!clearable &&
+                showTodayButton && (
+                  <Button color="primary" onClick={this.handleSetTodayDate}>
+                    {todayLabel}
+                  </Button>
+                )}
+            </DialogActions>
+          </React.Fragment>
+        </Popover>
       </React.Fragment>
     );
   }
@@ -166,7 +229,24 @@ const styles = {
   popoverPaper: {
     maxWidth: 310,
     minWidth: 290,
-    paddingBottom: 8,
+  },
+  dialogActions: {
+    // set justifyContent to default value to fix IE11 layout bug
+    // see https://github.com/dmtrKovalenko/material-ui-pickers/pull/267
+    justifyContent: 'flex-start',
+  },
+  dialogAction: {
+    // empty but may be needed for override
+  },
+  clearableDialogAction: {
+    '&:first-child': {
+      marginRight: 'auto',
+    },
+  },
+  todayDialogAction: {
+    '&:first-child': {
+      marginRight: 'auto',
+    },
   },
 };