Stats: Update to fix header consistency (#96661)

* pass chartRange to DatePicker

* use chartStart/End ranges for the date range when we have them

* add checks for same day, full month, or full year

client/my-sites/stats/site.jsx

@@ -486,6 +486,7 @@ class StatsSite extends Component {
 								statsType="statsTopPosts"
 								showQueryDate
 								isShort
+								dateRange={ customChartRange }
 							/>
 						</StatsPeriodNavigation>
 					</StatsPeriodHeader>

client/my-sites/stats/stats-date-picker/index.jsx

@@ -52,16 +52,52 @@ class StatsDatePicker extends Component {
 	}
 
 	dateForDisplay() {
-		const { date, moment, period, translate, isShort } = this.props;
+		const { date, moment, period, translate, isShort, dateRange } = this.props;
+		const weekPeriodFormat = isShort ? 'll' : 'LL';
+
+		// If we have chartStart/chartEnd in dateRange, use those for the date range
+		if ( dateRange?.chartStart && dateRange?.chartEnd ) {
+			const startDate = moment( dateRange.chartStart );
+			const endDate = moment( dateRange.chartEnd );
+
+			// If it's the same day, show single date
+			if ( startDate.isSame( endDate, 'day' ) ) {
+				return startDate.format( 'LL' );
+			}
+
+			// If it's a full month
+			if (
+				startDate.isSame( startDate.clone().startOf( 'month' ), 'day' ) &&
+				endDate.isSame( endDate.clone().endOf( 'month' ), 'day' ) &&
+				startDate.isSame( endDate, 'month' )
+			) {
+				return startDate.format( 'MMMM YYYY' );
+			}
+
+			// If it's a full year
+			if (
+				startDate.isSame( startDate.clone().startOf( 'year' ), 'day' ) &&
+				endDate.isSame( endDate.clone().endOf( 'year' ), 'day' ) &&
+				startDate.isSame( endDate, 'year' )
+			) {
+				return startDate.format( 'YYYY' );
+			}
+
+			// Default to date range
+			return translate( '%(startDate)s - %(endDate)s', {
+				context: 'Date range for which stats are being displayed',
+				args: {
+					startDate: startDate.format( weekPeriodFormat ),
+					endDate: endDate.format( weekPeriodFormat ),
+				},
+			} );
+		}
 
 		// Ensure we have a moment instance here to work with.
 		const momentDate = moment.isMoment( date ) ? date : moment( date );
 		const localizedDate = moment( momentDate.format( 'YYYY-MM-DD' ) );
 		let formattedDate;
 
-		// ll is a date localized with abbreviated Month by momentjs
-		const weekPeriodFormat = isShort ? 'll' : 'LL';
-
 		switch ( period ) {
 			case 'week':
 				formattedDate = translate( '%(startDate)s - %(endDate)s', {