[DateTimePicker] Add more consistent padding for 24h mode (mui#851)

mnajdova · Jan 11, 2019 · b911357 · b911357
1 parent bc88143
commit b911357
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/docs/src/Pages/Components/DateTimePicker/CustomDateTimePicker.example.jsx b/docs/src/Pages/Components/DateTimePicker/CustomDateTimePicker.example.jsx
@@ -7,7 +7,7 @@ import SnoozeIcon from '@material-ui/icons/Snooze';
 
 class CustomDateTimePicker extends PureComponent {
   state = {
-    selectedDate: new Date('2018-01-01T18:54'),
+    selectedDate: new Date('2019-01-01T18:54'),
     clearedDate: null,
   };
 
@@ -32,6 +32,7 @@ class CustomDateTimePicker extends PureComponent {
             autoSubmit={false}
             allowKeyboardControl={false}
             disableFuture
+            minDate="2018-01-01"
             value={selectedDate}
             onChange={this.handleDateChange}
             helperText="Hardcoded helper text"

diff --git a/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx b/docs/src/Pages/Components/DateTimePicker/InlineDateTimePicker.example.jsx
@@ -27,12 +27,15 @@ class InlineDateTimePickerDemo extends PureComponent {
         <div className="picker">
           <InlineDateTimePicker
             keyboard
+            ampm={false}
             label="With keyboard"
             value={selectedDate}
             onChange={this.handleDateChange}
+            onError={console.log}
+            disablePast
             format={this.props.getFormatString({
               moment: 'YYYY/MM/DD hh:mm A',
-              dateFns: 'yyyy/MM/dd hh:mm a',
+              dateFns: 'yyyy/MM/dd HH:mm',
             })}
             mask={[
               /\d/,
@@ -51,9 +54,6 @@ class InlineDateTimePickerDemo extends PureComponent {
               ':',
               /\d/,
               /\d/,
-              ' ',
-              /a|p/i,
-              'M',
             ]}
           />
         </div>

diff --git a/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx b/lib/src/DateTimePicker/components/DateTimePickerHeader.tsx
@@ -1,8 +1,10 @@
+import classnames from 'classnames';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
 import { Theme } from '@material-ui/core';
 import createStyles from '@material-ui/core/styles/createStyles';
 import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
 import PickerToolbar from '../../_shared/PickerToolbar';
 import ToolbarButton from '../../_shared/ToolbarButton';
 import { withUtils, WithUtilsProps } from '../../_shared/WithUtils';
@@ -18,6 +20,9 @@ export const styles = (theme: Theme) =>
       paddingRight: 16,
       justifyContent: 'space-around',
     },
+    toolBar24h: {
+      paddingLeft: 32,
+    },
     separator: {
       margin: '0 4px 0 2px',
       cursor: 'default',
@@ -48,7 +53,7 @@ export const styles = (theme: Theme) =>
       height: 65,
       minWidth: 155,
       display: 'flex',
-      justifyContent: 'flex-end',
+      justifyContent: 'center',
       alignItems: 'flex-end',
     },
   });
@@ -74,7 +79,7 @@ export const DateTimePickerHeader: React.SFC<DateTimePickerHeaderProps> = ({
   ampm,
 }) => {
   return (
-    <PickerToolbar className={classes.toolbar}>
+    <PickerToolbar className={classnames(classes.toolbar, { [classes.toolBar24h]: !ampm })}>
       <div className={classes.dateHeader}>
         <ToolbarButton
           variant="subtitle1"