Add seconds to DateTimePicker view

- Add seconds as an available view in DateTimePickerView
- Use DateTimePickerView type as the type for views and openTo
- Change typography variant depending on whether seconds are being displayed or not
- set number of grid elements depending on seconds view

docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx

@@ -53,6 +53,17 @@ function CustomDateTimePicker(props) {
         onChange={handleClearedDateChange}
         renderInput={props => <TextField {...props} helperText="Clear Initial State" />}
       />
+
+      <DateTimePicker
+        value={selectedDate}
+        onChange={handleDateChange}
+        renderInput={props => <TextField {...props} helperText="With Seconds" />}
+        views={['year', 'month', 'date', 'hours', 'minutes', 'seconds']}
+        inputFormat={props.__willBeReplacedGetFormatString({
+          moment: 'YYYY/MM/DD HH:mm:ss A',
+          dateFns: 'yyyy/MM/dd HH:mm:ss a',
+        })}
+      />
     </React.Fragment>
   );
 }

lib/src/DateTimePicker/DateTimePicker.tsx

@@ -15,7 +15,7 @@ import { ParsableDate, defaultMinDate, defaultMaxDate } from '../constants/prop-
 export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
 
 export interface BaseDateTimePickerProps
-  extends WithViewsProps<'year' | 'date' | 'month' | 'hours' | 'minutes'>,
+  extends WithViewsProps<'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds'>,
     ValidationProps<DateAndTimeValidationError, ParsableDate>,
     ExportedClockViewProps,
     ExportedCalendarViewProps {

lib/src/DateTimePicker/DateTimePickerToolbar.tsx

@@ -10,6 +10,8 @@ import { MaterialUiPickersDate } from '../typings/date';
 import { ToolbarComponentProps } from '../Picker/Picker';
 import { withDefaultProps } from '../_shared/withDefaultProps';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
+import { useMemo } from 'react';
+import { arrayIncludes } from '../_helpers/utils';
 
 const muiComponentConfig = { name: 'MuiPickersDateTimePickerToolbar' };
 
@@ -57,6 +59,7 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = withDefaul
     toolbarFormat,
     toolbarPlaceholder = '––',
     toolbarTitle = 'SELECT DATE & TIME',
+    views,
   }) => {
     const utils = useUtils();
     const classes = useStyles();
@@ -81,6 +84,9 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = withDefaul
       return utils.format(date, 'shortDate');
     }, [date, toolbarFormat, toolbarPlaceholder, utils]);
 
+    const hasSeconds = useMemo(() => arrayIncludes(views, 'seconds'), [views]);
+    const timeTypographyText = hasSeconds ? 'h4' : 'h3';
+
     return (
       <React.Fragment>
         {wrapperVariant !== 'desktop' && (
@@ -114,25 +120,45 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = withDefaul
             <div className={classes.timeContainer}>
               <ToolbarButton
                 tabIndex={-1}
-                variant="h3"
+                variant={timeTypographyText}
                 data-mui-test="hours"
                 onClick={() => setOpenView('hours')}
                 selected={openView === 'hours'}
                 value={date ? formatHours(date) : '--'}
                 typographyClassName={classes.timeTypography}
               />
 
-              <ToolbarText variant="h3" value=":" className={classes.separator} />
+              <ToolbarText variant={timeTypographyText} value=":" className={classes.separator} />
 
               <ToolbarButton
                 tabIndex={-1}
-                variant="h3"
+                variant={timeTypographyText}
                 data-mui-test="minutes"
                 onClick={() => setOpenView('minutes')}
                 selected={openView === 'minutes'}
                 value={date ? utils.format(date, 'minutes') : '--'}
                 typographyClassName={classes.timeTypography}
               />
+
+              {hasSeconds && (
+                <>
+                  <ToolbarText
+                    variant={timeTypographyText}
+                    value=":"
+                    className={classes.separator}
+                  />
+
+                  <ToolbarButton
+                    tabIndex={-1}
+                    variant={timeTypographyText}
+                    data-mui-test="seconds"
+                    onClick={() => setOpenView('seconds')}
+                    selected={openView === 'seconds'}
+                    value={date ? utils.format(date, 'seconds') : '--'}
+                    typographyClassName={classes.timeTypography}
+                  />
+                </>
+              )}
             </div>
           </PickerToolbar>
         )}

lib/src/__tests__/DateTimePickerRoot.test.tsx

@@ -71,3 +71,28 @@ describe('e2e - DateTimePicker', () => {
     toHaveBeenCalledExceptMoment(onChangeMock, [utilsToUse.date('2018-01-01T12:00:00.000Z')]);
   });
 });
+
+describe('e2e - DateTimePicker with seconds', () => {
+  it('Should render hour view', () => {
+    const onChangeMock = jest.fn();
+
+    const component = mount(
+      <MobileDateTimePicker
+        ampm
+        open
+        openTo="hours"
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        renderInput={props => <TextField {...props} />}
+        views={['year', 'month', 'date', 'hours', 'minutes', 'seconds']}
+      />
+    );
+
+    component
+      .find('ToolbarButton')
+      .at(4)
+      .simulate('click');
+
+    expect(component.find('ClockView').props().type).toBe('seconds');
+  });
+});