Repository: ionic-team/ionic-framework
File: core/src/components/datetime/datetime.tsx (TypeScript)

Code before:
    }

    const { activeParts, selectedDatesLabelFormatter } = this;
    const isArray = Array.isArray(activeParts);

    let headerText;
    if (isArray && activeParts.length !== 1) {
      const defaultText = `${activeParts.length} days`;
      if (selectedDatesLabelFormatter !== undefined) {
        try {
          headerText = selectedDatesLabelFormatter(activeParts.length);
        } catch (e) {
          printIonError('Exception in provided `selectedDatesLabelFormatter`: ', e);
          headerText = defaultText; // fallback
        }
      } else {
        headerText = defaultText;
      }
    } else {
      // for exactly 1 day selected (multiple set or not), show a formatted version of that
      headerText = getMonthAndDay(this.locale, isArray ? activeParts[0] : activeParts);
    }

    return (
      <div class="datetime-header">
        <div class="datetime-title">
          <slot name="title">Select Date</slot>
        </div>
        <div class="datetime-selected-date">{headerText}</div>
      </div>
    );
  }

  /**
   * Render time picker inside of datetime.
   * Do not pass color prop to segment on
   * iOS mode. MD segment has been customized and
   * should take on the color prop, but iOS
   * should just be the default segment.
   */
  private renderTime() {
    const { presentation } = this;
    const timeOnlyPresentation = presentation === 'time';

    return (
      <div class="datetime-time">{timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()}</div>
    );
  }

  /**
   * Renders the month/year picker that is

Review comment (suggestion):
I didn't think of this aspect during the design phase, but should we allow `selectedDatesLabelFormatter` to return undefined to disable the rendering of this space?

Then this area could be conditionally rendered:
```jsx
{headerText && (<div class="datetime-selected-date">{headerText}</div>}
```

Code after:
    }

    const { activeParts, titleSelectedDatesFormatter } = this;
    const isArray = Array.isArray(activeParts);

    let headerText: string;
    if (isArray && activeParts.length !== 1) {
      headerText = `${activeParts.length} days`; // default/fallback for multiple selection
      if (titleSelectedDatesFormatter !== undefined) {
        try {
          headerText = titleSelectedDatesFormatter(convertDataToISO(activeParts));
        } catch (e) {
          printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
        }
      }
    } else {
      // for exactly 1 day selected (multiple set or not), show a formatted version of that
      headerText = getMonthAndDay(this.locale, isArray ? activeParts[0] : activeParts);
    }

    return (
      <div class="datetime-header">
        <div class="datetime-title">
          <slot name="title">Select Date</slot>
        </div>
        <div class="datetime-selected-date">{headerText}</div>
      </div>
    );
  }

  /**
   * Render time picker inside of datetime.
   * Do not pass color prop to segment on
   * iOS mode. MD segment has been customized and
   * should take on the color prop, but iOS
   * should just be the default segment.
   */
  private renderTime() {
    const { presentation } = this;
    const timeOnlyPresentation = presentation === 'time';

    return (
      <div class="datetime-time">{timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()}</div>
    );
  }

  /**
   * Renders the month/year picker that is
   * displayed on the calendar grid.
   * The .datetime-year class has additional
   * styles that let us show/hide the