diff --git a/src/components/dateTimePicker/dateTimePicker.api.json b/src/components/dateTimePicker/dateTimePicker.api.json index b927b97a29..765c2c0b92 100644 --- a/src/components/dateTimePicker/dateTimePicker.api.json +++ b/src/components/dateTimePicker/dateTimePicker.api.json @@ -25,10 +25,12 @@ {"name": "editable", "type": "boolean", "description": "Should this input be editable or disabled"}, {"name": "minimumDate", "type": "Date", "description": "The minimum date or time value to use"}, {"name": "maximumDate", "type": "Date", "description": "The maximum date or time value to use"}, - {"name": "dateFormat", "type": "string", "description": "The date format for the text display"}, - {"name": "dateFormatter", "type": "() => Date", "description": "A callback function to format date"}, - {"name": "timeFormat", "type": "string", "description": "The time format for the text display"}, - {"name": "timeFormatter", "type": "() => Date", "description": "A callback function to format time"}, + {"name": "dateFormat", "type": "string", "description": "The date format for the text display when mode is 'date'"}, + {"name": "dateFormatter", "type": "() => Date", "description": "A callback function to format date when mode is 'date'"}, + {"name": "timeFormat", "type": "string", "description": "The date format for the text display when mode is 'time'"}, + {"name": "timeFormatter", "type": "() => Date", "description": "A callback function to format date when mode is 'time'"}, + {"name": "dateTimeFormat", "type": "string", "description": "The date format for the text display when mode is 'dateTime'"}, + {"name": "dateTimeFormatter", "type": "() => Date", "description": "A callback function to format date when mode is 'dateTime'"}, { "name": "locale", "type": "string", diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx index 6f96d1e45f..0eb7f956be 100644 --- a/src/components/dateTimePicker/index.tsx +++ b/src/components/dateTimePicker/index.tsx @@ -14,7 +14,8 @@ import type {TextFieldProps} from '../../incubator/TextField'; const MODES = { DATE: 'date', - TIME: 'time' + TIME: 'time', + DATETIME: 'datetime' }; export type DateTimePickerProps = Omit & { @@ -43,21 +44,29 @@ export type DateTimePickerProps = Omit & { */ maximumDate?: Date; /** - * The date format for the text display + * The date format for the text display when mode is 'date' */ dateFormat?: string; /** - * A callback function to format date + * A callback function to format date when mode is 'date' */ dateFormatter?: (date: Date) => string; /** - * The time format for the text display + * The date format for the text display when mode is 'time' */ timeFormat?: string; /** - * A callback function to format time + * A callback function to format date when mode is 'time' */ timeFormatter?: (date: Date) => string; + /** + * The date format for the text display when mode is 'dateTime' + */ + dateTimeFormat?: string; + /** + * A callback function to format date when mode is 'dateTime' + */ + dateTimeFormatter?: (date: Date) => string; /** * Allows changing of the locale of the component (iOS only) */ @@ -121,8 +130,10 @@ function DateTimePicker(props: DateTimePickerPropsInternal) { mode = MODES.DATE, dateFormat, timeFormat, + dateTimeFormat, dateFormatter, timeFormatter, + dateTimeFormatter, minimumDate, maximumDate, locale, @@ -193,6 +204,12 @@ function DateTimePicker(props: DateTimePickerPropsInternal) { : timeFormat && moment ? moment(value).format(timeFormat) : value.toLocaleTimeString(); + case MODES.DATETIME: + return dateTimeFormatter + ? dateTimeFormatter(value) + : dateTimeFormat && moment + ? moment(value).format(dateTimeFormat) + : value.toLocaleTimeString(); } } };