Add new toolbarFormat prop, closes mui#1345

mnajdova · Feb 24, 2020 · 0b9df54 · 0b9df54
1 parent bc20e28
commit 0b9df54
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 2 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
diff --git a/lib/src/DatePicker/DatePicker.tsx b/lib/src/DatePicker/DatePicker.tsx
@@ -17,6 +17,8 @@ export type DatePickerView = 'year' | 'date' | 'month';
 export interface BaseDatePickerProps extends ExportedCalendarViewProps {
  /** Callback firing on year change @DateIOType */
  onYearChange?: (date: MaterialUiPickersDate) => void;
+ /** Date format, that is displaying in toolbar */
+ toolbarFormat?: string;
 }
 
 export type DatePickerProps = BaseDatePickerProps &

diff --git a/lib/src/DatePicker/DatePickerToolbar.tsx b/lib/src/DatePicker/DatePickerToolbar.tsx
@@ -26,12 +26,17 @@ export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
  isLandscape,
  isMobileKeyboardViewOpen,
  toggleMobileKeyboardView,
+ toolbarFormat,
  toolbarTitle = 'SELECT DATE',
 }) => {
  const utils = useUtils();
  const classes = useStyles();
 
  const dateText = React.useMemo(() => {
+ if (toolbarFormat) {
+ return utils.formatByString(date, toolbarFormat);
+ }
+
  if (isYearOnlyView(views as DatePickerView[])) {
  return utils.format(date, 'year');
  }
@@ -46,7 +51,7 @@ export const DatePickerToolbar: React.FC<ToolbarComponentProps> = ({
  return /en/.test(utils.getCurrentLocaleCode())
  ? utils.format(date, 'normalDateWithWeekday')
  : utils.format(date, 'normalDate');
- }, [date, utils, views]);
+ }, [date, toolbarFormat, utils, views]);
 
  return (
  <PickerToolbar

diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx
@@ -27,6 +27,8 @@ export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
  minDateTime?: ParsableDate;
  /** Minimal selectable moment of time with binding to date, to set max time in each day use `maxTime` */
  maxDateTime?: ParsableDate;
+ /** Date format, that is displaying in toolbar */
+ toolbarFormat?: string;
 }
 
 export type DateTimePickerProps = WithDateInputProps &

diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -45,6 +45,7 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
  hideTabs,
  dateRangeIcon,
  timeIcon,
+ toolbarFormat,
  isMobileKeyboardViewOpen,
  toggleMobileKeyboardView,
  toolbarTitle = 'SELECT DATE & TIME',
@@ -77,7 +78,11 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
  variant="h4"
  onClick={() => setOpenView('date')}
  selected={openView === 'date'}
- label={utils.format(date, 'shortDate')}
+ label={
+ toolbarFormat
+ ? utils.formatByString(date, toolbarFormat)
+ : utils.format(date, 'shortDate')
+ }
  />
  </div>
 

diff --git a/lib/src/Picker/makePickerWithState.tsx b/lib/src/Picker/makePickerWithState.tsx
@@ -71,6 +71,7 @@ export function makePickerWithStateAndWrapper<
  shouldDisableTime,
  strictCompareDates,
  timeIcon,
+ toolbarFormat,
  ToolbarComponent = DefaultToolbarComponent,
  value,
  views,
@@ -147,6 +148,7 @@ export function makePickerWithStateAndWrapper<
  showToolbar={showToolbar}
  strictCompareDates={strictCompareDates}
  timeIcon={timeIcon}
+ toolbarFormat={toolbarFormat}
  ToolbarComponent={ToolbarComponent}
  // @ts-ignore
  toolbarTitle={toolbarTitle || restPropsForTextField.label}