diff --git a/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx b/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx index 630cbe0d9..aa6d755ce 100644 --- a/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx +++ b/docs/pages/demo/datetime-picker/CustomDateTimePicker.example.jsx @@ -52,6 +52,17 @@ function CustomDateTimePicker(props) { onChange={handleClearedDateChange} renderInput={props => } /> + + } + 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', + })} + /> ); } diff --git a/docs/prop-types.json b/docs/prop-types.json index 0ccc3a5d1..cdbd6f386 100644 --- a/docs/prop-types.json +++ b/docs/prop-types.json @@ -320,7 +320,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", + "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\r\nThis can be used to render appropriate form error.\r\n\r\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", @@ -879,7 +879,7 @@ }, "renderInput": { "defaultValue": null, - "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\r\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\rrenderInput={props => }\r````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -1004,7 +1004,7 @@ }, "dateAdapter": { "defaultValue": null, - "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\n```", + "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\r\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\r\n```", "name": "dateAdapter", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/withDateAdapterProp.tsx", @@ -1292,7 +1292,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", + "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\r\nThis can be used to render appropriate form error.\r\n\r\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", @@ -1571,7 +1571,7 @@ }, "renderInput": { "defaultValue": null, - "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\r\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\rrenderInput={props => }\r````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -1696,7 +1696,7 @@ }, "dateAdapter": { "defaultValue": null, - "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\n```", + "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\r\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\r\n```", "name": "dateAdapter", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/withDateAdapterProp.tsx", @@ -1956,7 +1956,7 @@ }, "required": false, "type": { - "name": "(\"year\" | \"date\" | \"month\" | \"hours\" | \"minutes\")[]" + "name": "DateTimePickerView[]" } }, "openTo": { @@ -1969,12 +1969,12 @@ }, "required": false, "type": { - "name": "\"year\" | \"date\" | \"month\" | \"hours\" | \"minutes\"" + "name": "\"year\" | \"date\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\"" } }, "onError": { "defaultValue": null, - "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", + "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\r\nThis can be used to render appropriate form error.\r\n\r\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", @@ -2619,7 +2619,7 @@ }, "renderInput": { "defaultValue": null, - "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\nrenderInput={props => }\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `props` argument of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api) that you need to forward.\r\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\rrenderInput={props => }\r````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/PureDateInput.tsx", @@ -2744,7 +2744,7 @@ }, "dateAdapter": { "defaultValue": null, - "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\n```", + "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\r\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\r\n```", "name": "dateAdapter", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/withDateAdapterProp.tsx", @@ -3472,7 +3472,7 @@ }, "onError": { "defaultValue": null, - "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\nThis can be used to render appropriate form error.\n\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", + "description": "Callback that fired when input value or new `value` prop validation returns **new** validation error (or value is valid after error).\nIn case of validation error detected `reason` prop return non-null value and `TextField` must be displayed in `error` state.\r\nThis can be used to render appropriate form error.\r\n\r\n[Read the guide](https://next.material-ui-pickers.dev/guides/forms) about form integration and error displaying.\n@DateIOType", "name": "onError", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/hooks/useValidation.ts", @@ -3485,7 +3485,7 @@ }, "renderInput": { "defaultValue": null, - "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api),\nthat you need to forward to the range start/end inputs respectively.\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\n (\n \n \n to \n \n ;\n)}\n/>\n````", + "description": "The `renderInput` prop allows you to customize the rendered input.\nThe `startProps` and `endProps` arguments of this render prop contains props of [TextField](https://material-ui.com/api/text-field/#textfield-api),\r\nthat you need to forward to the range start/end inputs respectively.\r\nPay specific attention to the `ref` and `inputProps` keys.\n@example ```jsx\r (\r \r \r to \r \r ;\r)}\r/>\r````", "name": "renderInput", "parent": { "fileName": "material-ui-pickers/lib/src/DateRangePicker/DateRangePickerInput.tsx", @@ -3649,7 +3649,7 @@ }, "dateAdapter": { "defaultValue": null, - "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\n```", + "description": "Allows to pass configured date-io adapter directly. More info [here](https://material-ui-pickers.dev/guides/date-adapter-passing)\n```jsx\r\ndateAdapter={new DateFnsAdapter({ locale: ruLocale })}\r\n```", "name": "dateAdapter", "parent": { "fileName": "material-ui-pickers/lib/src/_shared/withDateAdapterProp.tsx", diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx index 70e7e6529..4ee267d75 100644 --- a/lib/src/DateTimePicker/DateTimePicker.tsx +++ b/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, ExportedClockViewProps, ExportedCalendarViewProps { diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx index 464e2c0d8..92cdf5752 100644 --- a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx +++ b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx @@ -10,6 +10,8 @@ import { MaterialUiPickersDate } from '../typings/date'; import { withDefaultProps } from '../_shared/withDefaultProps'; import { ToolbarComponentProps } from '../Picker/SharedPickerProps'; import { WrapperVariantContext } from '../wrappers/WrapperVariantContext'; +import { useMemo } from 'react'; +import { arrayIncludes } from '../_helpers/utils'; const muiComponentConfig = { name: 'MuiPickersDateTimePickerToolbar' }; @@ -58,6 +60,7 @@ export const DateTimePickerToolbar: React.FC = withDefaul toolbarFormat, toolbarPlaceholder = '––', toolbarTitle = 'SELECT DATE & TIME', + views, ...other }) => { const utils = useUtils(); @@ -83,6 +86,9 @@ export const DateTimePickerToolbar: React.FC = withDefaul return utils.format(date, 'shortDate'); }, [date, toolbarFormat, toolbarPlaceholder, utils]); + const hasSeconds = useMemo(() => arrayIncludes(views, 'seconds'), [views]); + const timeTypographyText = hasSeconds ? 'h4' : 'h3'; + return ( {wrapperVariant !== 'desktop' && ( @@ -117,7 +123,7 @@ export const DateTimePickerToolbar: React.FC = withDefaul
setOpenView('hours')} selected={openView === 'hours'} @@ -125,17 +131,37 @@ export const DateTimePickerToolbar: React.FC = withDefaul typographyClassName={classes.timeTypography} /> - + setOpenView('minutes')} selected={openView === 'minutes'} value={date ? utils.format(date, 'minutes') : '--'} typographyClassName={classes.timeTypography} /> + + {hasSeconds && ( + <> + + + setOpenView('seconds')} + selected={openView === 'seconds'} + value={date ? utils.format(date, 'seconds') : '--'} + typographyClassName={classes.timeTypography} + /> + + )}
)} diff --git a/lib/src/__tests__/DateTimePickerRoot.test.tsx b/lib/src/__tests__/DateTimePickerRoot.test.tsx index 4f5e5b2b2..076ab9d38 100644 --- a/lib/src/__tests__/DateTimePickerRoot.test.tsx +++ b/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( + } + views={['year', 'month', 'date', 'hours', 'minutes', 'seconds']} + /> + ); + + component + .find('ToolbarButton') + .at(4) + .simulate('click'); + + expect(component.find('ClockView').props().type).toBe('seconds'); + }); +});