Calypso UI Components: DateRange: Align days to the start of day (#94739

)

* align days to the start of day

* addDayToRange should ignore time fractions

* addDayToRange should ignore time fractions

* use the right func signature

* revert unecessary change

* revert unecessary change

client/components/date-range/date-range-picker.tsx

@@ -91,6 +91,8 @@ const DateRangePicker = ( {
 			return;
 		}
 
+		date = date.startOf( 'day' );
+
 		// Calculate the new Date range
 		const newRange = addDayToRange( date, { from: selectedStartDate, to: selectedEndDate } );
 
@@ -132,6 +134,10 @@ const DateRangePicker = ( {
 		}
 	}, [ selectedStartDate?.format(), selectedEndDate?.format() ] );
 
+	// Normalize dates to start of day
+	selectedStartDate = ! selectedStartDate ? selectedStartDate : selectedStartDate.startOf( 'day' );
+	selectedEndDate = ! selectedEndDate ? selectedEndDate : selectedEndDate.startOf( 'day' );
+
 	const fromDate = momentDateToJsDate( selectedStartDate );
 	const toDate = momentDateToJsDate( selectedEndDate );
 

client/components/date-range/index.js

@@ -118,7 +118,6 @@ export class DateRange extends Component {
 			initialStartDate: startDate, // cache values in case we need to reset to them
 			initialEndDate: endDate, // cache values in case we need to reset to them
 			focusedMonth: this.props.focusedMonth,
-			currentShortcut: '',
 		};
 
 		// Ref to the Trigger <button> used to position the Popover component
@@ -400,22 +399,16 @@ export class DateRange extends Component {
 		return window.matchMedia( '(min-width: 520px)' ).matches ? 2 : 1;
 	}
 
-	handleDateRangeChange = ( startDate, endDate, shortcutId = '' ) => {
+	handleDateRangeChange = ( startDate, endDate ) => {
 		this.setState( {
 			startDate,
 			endDate,
 			textInputStartDate: this.toDateString( startDate ),
 			textInputEndDate: this.toDateString( endDate ),
-			currentShortcut: shortcutId,
 		} );
 		this.props.onDateSelect && this.props.onDateSelect( startDate, endDate );
 	};
 
-	handleCalendarChange = ( startDate, endDate ) => {
-		// When the calendar or inputs change directly, set to custom range
-		this.handleDateRangeChange( startDate, endDate, 'custom_date_range' );
-	};
-
 	/**
 	 * Renders the Popover component
 	 * @returns {import('react').Element} the Popover component
@@ -467,7 +460,6 @@ export class DateRange extends Component {
 					{ this.props.displayShortcuts && (
 						<div className="date-range-picker-shortcuts">
 							<Shortcuts
-								currentShortcut={ this.state.currentShortcut }
 								onClick={ this.handleDateRangeChange }
 								locked={ !! this.props.overlay }
 								startDate={ this.state.startDate }
@@ -491,7 +483,7 @@ export class DateRange extends Component {
 				lastSelectableDate={ this.props.lastSelectableDate }
 				selectedStartDate={ this.state.startDate }
 				selectedEndDate={ this.state.endDate }
-				onDateRangeChange={ this.handleCalendarChange }
+				onDateRangeChange={ this.handleDateRangeChange }
 				focusedMonth={ this.state.focusedMonth }
 				numberOfMonths={ this.getNumberOfMonths() }
 				useArrowNavigation={ this.props.useArrowNavigation }

client/components/date-range/test/add-date-to-range.js

@@ -63,4 +63,11 @@ describe( 'addDayToRange', () => {
 		expect( result.from ).toEqual( range.from );
 		expect( result.to ).toEqual( moment( '2023-01-07' ) );
 	} );
+
+	test( 'should ignore time fractions', () => {
+		const range = { from: moment( '2023-01-01 11:10' ), to: moment( '2023-01-17 12:00' ) };
+		const result = addDayToRange( moment( '2023-01-17 13:00' ), range );
+		expect( result.from ).toEqual( range.from );
+		expect( result.to ).toBeNull();
+	} );
 } );

client/components/date-range/utils.ts

@@ -10,7 +10,11 @@ function addDayToRange( day: Moment, range: DateRange ): DateRange {
 		return range;
 	}
 
-	const { from, to } = range;
+	let { from, to } = range;
+
+	from = from?.startOf( 'day' ) ?? null;
+	to = to?.startOf( 'day' ) ?? null;
+	day = day.startOf( 'day' );
 
 	if ( from?.isSame( day ) ) {
 		return { ...range, from: null };

client/components/stats-date-control/index.tsx

@@ -125,7 +125,8 @@ const StatsDateControl = ( {
 				<DateRange
 					selectedStartDate={ moment( dateRange.chartStart ) }
 					selectedEndDate={ moment( dateRange.chartEnd ) }
-					lastSelectableDate={ moment().toDate() }
+					lastSelectableDate={ moment() }
+					firstSelectableDate={ moment( '2010-01-01' ) }
 					onDateCommit={ ( startDate: Moment, endDate: Moment ) =>
 						startDate &&
 						endDate &&