diff --git a/plugins/woocommerce-admin/client/components/calendar/index.js b/plugins/woocommerce-admin/client/components/calendar/index.js
index 21d7c4f5966..d07ecb948c4 100644
--- a/plugins/woocommerce-admin/client/components/calendar/index.js
+++ b/plugins/woocommerce-admin/client/components/calendar/index.js
@@ -34,11 +34,11 @@ class DateRange extends Component {
 	constructor( props ) {
 		super( props );
 
-		const { start, end } = props;
+		const { after, before } = props;
 		this.state = {
 			focusedInput: START_DATE,
-			startText: start ? start.format( shortDateFormat ) : '',
-			endText: end ? end.format( shortDateFormat ) : '',
+			afterText: after ? after.format( shortDateFormat ) : '',
+			beforeText: before ? before.format( shortDateFormat ) : '',
 		};
 
 		this.onDatesChange = this.onDatesChange.bind( this );
@@ -49,12 +49,12 @@ class DateRange extends Component {
 
 	onDatesChange( { startDate, endDate } ) {
 		this.setState( {
-			startText: startDate ? startDate.format( shortDateFormat ) : '',
-			endText: endDate ? endDate.format( shortDateFormat ) : '',
+			afterText: startDate ? startDate.format( shortDateFormat ) : '',
+			beforeText: endDate ? endDate.format( shortDateFormat ) : '',
 		} );
 		this.props.onSelect( {
-			start: startDate,
-			end: endDate,
+			after: startDate,
+			before: endDate,
 		} );
 	}
 
@@ -66,15 +66,12 @@ class DateRange extends Component {
 
 	onInputChange( input, event ) {
 		const value = event.target.value;
-		this.setState( { [ input ]: value } );
+		this.setState( { [ input + 'Text' ]: value } );
 		const date = toMoment( shortDateFormat, value );
 		if ( date ) {
-			const match = input.match( /.*(?=Text)/ );
-			if ( match ) {
-				this.props.onSelect( {
-					[ match[ 0 ] ]: date,
-				} );
-			}
+			this.props.onSelect( {
+				[ input ]: date,
+			} );
 		}
 	}
 
@@ -95,22 +92,22 @@ class DateRange extends Component {
 	}
 
 	render() {
-		const { focusedInput, startText, endText } = this.state;
-		const { start, end } = this.props;
+		const { focusedInput, afterText, beforeText } = this.state;
+		const { after, before } = this.props;
 		const isOutsideRange = this.getOutsideRange();
 		const isMobile = isMobileViewport();
 		return (
 			<Fragment>
 				<div className="woocommerce-date-picker__date-inputs">
 					<input
-						value={ startText }
+						value={ afterText }
 						type="text"
-						onChange={ partial( this.onInputChange, 'startText' ) }
+						onChange={ partial( this.onInputChange, 'after' ) }
 						aria-label={ __( 'Start Date', 'woo-dash' ) }
-						id="start-date-string"
-						aria-describedby="start-date-string-message"
+						id="after-date-string"
+						aria-describedby="after-date-string-message"
 					/>
-					<p className="screen-reader-text" id="start-date-string-message">
+					<p className="screen-reader-text" id="after-date-string-message">
 						{ sprintf(
 							__(
 								"Date input describing a selected date range's start date in format %s",
@@ -121,14 +118,14 @@ class DateRange extends Component {
 					</p>
 					<span>{ __( 'to', 'woo-dash' ) }</span>
 					<input
-						value={ endText }
+						value={ beforeText }
 						type="text"
-						onChange={ partial( this.onInputChange, 'endText' ) }
+						onChange={ partial( this.onInputChange, 'before' ) }
 						aria-label={ __( 'End Date', 'woo-dash' ) }
-						id="end-date-string"
-						aria-describedby="end-date-string-message"
+						id="before-date-string"
+						aria-describedby="before-date-string-message"
 					/>
-					<p className="screen-reader-text" id="start-date-string-message">
+					<p className="screen-reader-text" id="before-date-string-message">
 						{ sprintf(
 							__(
 								"Date input describing a selected date range's end date in format %s",
@@ -147,10 +144,10 @@ class DateRange extends Component {
 						onDatesChange={ this.onDatesChange }
 						onFocusChange={ this.onFocusChange }
 						focusedInput={ focusedInput }
-						startDate={ start }
+						startDate={ after }
 						startDateId={ START_DATE }
 						startDatePlaceholderText={ 'Start Date' }
-						endDate={ end }
+						endDate={ before }
 						endDateId={ END_DATE }
 						endDatePlaceholderText={ 'End Date' }
 						orientation={ 'horizontal' }
@@ -159,7 +156,7 @@ class DateRange extends Component {
 						minimumNights={ 0 }
 						hideKeyboardShortcutsPanel
 						noBorder
-						initialVisibleMonth={ () => start || moment() }
+						initialVisibleMonth={ () => after || moment() }
 						phrases={ phrases }
 					/>
 				</div>
@@ -169,8 +166,8 @@ class DateRange extends Component {
 }
 
 DateRange.propTypes = {
-	start: PropTypes.object,
-	end: PropTypes.object,
+	after: PropTypes.object,
+	before: PropTypes.object,
 	onSelect: PropTypes.func.isRequired,
 	inValidDays: PropTypes.oneOfType( [
 		PropTypes.oneOf( [ 'past', 'future', 'none' ] ),
diff --git a/plugins/woocommerce-admin/client/components/date-picker/content.js b/plugins/woocommerce-admin/client/components/date-picker/content.js
index 614cac1e535..a15c20cc517 100644
--- a/plugins/woocommerce-admin/client/components/date-picker/content.js
+++ b/plugins/woocommerce-admin/client/components/date-picker/content.js
@@ -38,8 +38,8 @@ class DatePickerContent extends Component {
 		const {
 			period,
 			compare,
-			start,
-			end,
+			after,
+			before,
 			onSelect,
 			onClose,
 			getUpdatePath,
@@ -83,8 +83,8 @@ class DatePickerContent extends Component {
 								) }
 								{ selectedTab === 'custom' && (
 									<DateRange
-										start={ start }
-										end={ end }
+										after={ after }
+										before={ before }
 										onSelect={ onSelect }
 										inValidDays="future"
 									/>
diff --git a/plugins/woocommerce-admin/client/components/date-picker/index.js b/plugins/woocommerce-admin/client/components/date-picker/index.js
index 2141e2cf66b..a1ca690e86c 100644
--- a/plugins/woocommerce-admin/client/components/date-picker/index.js
+++ b/plugins/woocommerce-admin/client/components/date-picker/index.js
@@ -29,12 +29,12 @@ class DatePicker extends Component {
 		this.setState( this.addQueryDefaults( nextProps.query ) );
 	}
 
-	addQueryDefaults( { period, compare, start, end } ) {
+	addQueryDefaults( { period, compare, after, before } ) {
 		return {
 			period: period || 'today',
 			compare: compare || 'previous_period',
-			start: start ? moment( start ) : null,
-			end: end ? moment( end ) : null,
+			after: after ? moment( after ) : null,
+			before: before ? moment( before ) : null,
 		};
 	}
 
@@ -43,22 +43,22 @@ class DatePicker extends Component {
 	}
 
 	getOtherQueries( query ) {
-		const { period, compare, start, end, ...otherQueries } = query; // eslint-disable-line no-unused-vars
+		const { period, compare, after, before, ...otherQueries } = query; // eslint-disable-line no-unused-vars
 		return otherQueries;
 	}
 
 	getUpdatePath( selectedTab ) {
 		const { path, query } = this.props;
 		const otherQueries = this.getOtherQueries( query );
-		const { period, compare, start, end } = this.state;
+		const { period, compare, after, before } = this.state;
 		const data = {
 			period: 'custom' === selectedTab ? 'custom' : period,
 			compare,
 		};
 		if ( 'custom' === selectedTab ) {
 			Object.assign( data, {
-				start: start ? start.format( isoDateFormat ) : '',
-				end: end ? end.format( isoDateFormat ) : '',
+				after: after ? after.format( isoDateFormat ) : '',
+				before: before ? before.format( isoDateFormat ) : '',
 			} );
 		}
 		const queryString = stringifyQueryObject( Object.assign( otherQueries, data ) );
@@ -81,15 +81,15 @@ class DatePicker extends Component {
 	}
 
 	isValidSelection( selectedTab ) {
-		const { compare, start, end } = this.state;
+		const { compare, after, before } = this.state;
 		if ( 'custom' === selectedTab ) {
-			return compare && start && end;
+			return compare && after && before;
 		}
 		return true;
 	}
 
 	render() {
-		const { period, compare, start, end } = this.state;
+		const { period, compare, after, before } = this.state;
 		return (
 			<Dropdown
 				className="woocommerce-date-picker"
@@ -109,8 +109,8 @@ class DatePicker extends Component {
 					<DatePickerContent
 						period={ period }
 						compare={ compare }
-						start={ start }
-						end={ end }
+						after={ after }
+						before={ before }
 						onSelect={ this.select }
 						onClose={ onClose }
 						getUpdatePath={ this.getUpdatePath }
diff --git a/plugins/woocommerce-admin/client/lib/date/index.js b/plugins/woocommerce-admin/client/lib/date/index.js
index d0d88639ade..e29b84b53dd 100644
--- a/plugins/woocommerce-admin/client/lib/date/index.js
+++ b/plugins/woocommerce-admin/client/lib/date/index.js
@@ -18,8 +18,8 @@ import { compareValues } from 'components/date-picker/compare-periods';
  * @typedef {Object} DateValue - Describes the date range supplied by the date picker.
  * @property {string} label - The translated value of the period.
  * @property {string} range - The human readable value of a date range.
- * @property {moment.Moment} start - Start of the date range.
- * @property {moment.Moment} end - End of the date range.
+ * @property {moment.Moment} after - Start of the date range.
+ * @property {moment.Moment} before - End of the date range.
  */
 
 export const isoDateFormat = 'YYYY-MM-DD';
@@ -45,26 +45,28 @@ export function toMoment( format, str ) {
 /**
  * Given two dates, derive a string representation
  *
- * @param {Moment} start - start date
- * @param {Moment} end - end date
+ * @param {Moment} after - start date
+ * @param {Moment} before - end date
  * @return {string} - text value for the supplied date range
  */
-export function getRangeLabel( start, end ) {
-	const isSameDay = start.isSame( end, 'day' );
-	const isSameYear = start.year() === end.year();
-	const isSameMonth = isSameYear && start.month() === end.month();
+export function getRangeLabel( after, before ) {
+	const isSameDay = after.isSame( before, 'day' );
+	const isSameYear = after.year() === before.year();
+	const isSameMonth = isSameYear && after.month() === before.month();
 	const fullDateFormat = __( 'MMM D, YYYY', 'woo-dash' );
 	const monthDayFormat = __( 'MMM D', 'woo-dash' );
 
 	if ( isSameDay ) {
-		return start.format( fullDateFormat );
+		return after.format( fullDateFormat );
 	} else if ( isSameMonth ) {
-		const startDate = start.date();
-		return start.format( fullDateFormat ).replace( startDate, `${ startDate } - ${ end.date() }` );
+		const afterDate = after.date();
+		return after
+			.format( fullDateFormat )
+			.replace( afterDate, `${ afterDate } - ${ before.date() }` );
 	} else if ( isSameYear ) {
-		return `${ start.format( monthDayFormat ) } - ${ end.format( fullDateFormat ) }`;
+		return `${ after.format( monthDayFormat ) } - ${ before.format( fullDateFormat ) }`;
 	}
-	return `${ start.format( fullDateFormat ) } - ${ end.format( fullDateFormat ) }`;
+	return `${ after.format( fullDateFormat ) } - ${ before.format( fullDateFormat ) }`;
 }
 
 /**
@@ -157,11 +159,11 @@ export function getCurrentPeriod( period, compare ) {
  *
  * @param {string} period - the chosen period
  * @param {string} compare - `previous_period` or `previous_year`
- * @param {Moment} [start] - start date if custom period
- * @param {Moment} [end] - end date if custom period
+ * @param {Moment} [after] - after date if custom period
+ * @param {Moment} [before] - before date if custom period
  * @return {DateValue} - DateValue data about the selected period
  */
-function getDateValue( period, compare, start, end ) {
+function getDateValue( period, compare, after, before ) {
 	switch ( period ) {
 		case 'today':
 			return getCurrentPeriod( 'day', compare );
@@ -184,22 +186,22 @@ function getDateValue( period, compare, start, end ) {
 		case 'last_year':
 			return getLastPeriod( 'year', compare );
 		case 'custom':
-			const difference = end.diff( start, 'days' );
+			const difference = before.diff( after, 'days' );
 			if ( 'previous_period' === compare ) {
-				const secondaryEnd = start.clone().subtract( 1, 'days' );
+				const secondaryEnd = after.clone().subtract( 1, 'days' );
 				const secondaryStart = secondaryEnd.clone().subtract( difference, 'days' );
 				return {
-					primaryStart: start,
-					primaryEnd: end,
+					primaryStart: after,
+					primaryEnd: before,
 					secondaryStart,
 					secondaryEnd,
 				};
 			}
 			return {
-				primaryStart: start,
-				primaryEnd: end,
-				secondaryStart: start.clone().subtract( 1, 'years' ),
-				secondaryEnd: end.clone().subtract( 1, 'years' ),
+				primaryStart: after,
+				primaryEnd: before,
+				secondaryStart: after.clone().subtract( 1, 'years' ),
+				secondaryEnd: before.clone().subtract( 1, 'years' ),
 			};
 	}
 }
@@ -209,30 +211,30 @@ function getDateValue( period, compare, start, end ) {
  *
  * @param {string} period - Indicates period, 'last_week', 'quarter', or 'custom'
  * @param {string} compare - Indicates the period to compare against, 'previous_period', previous_year'
- * @param {moment.Moment} [start] - If the period supplied is "custom", this is the start date
- * @param {moment.Moment} [end] - If the period supplied is "custom", this is the end date
+ * @param {moment.Moment} [after] - If the period supplied is "custom", this is the after date
+ * @param {moment.Moment} [before] - If the period supplied is "custom", this is the before date
  * @return {{primary: DateValue, secondary: DateValue}} - Primary and secondary DateValue objects
  */
-export const getCurrentDates = ( { period, compare, start, end } ) => {
+export const getCurrentDates = ( { period, compare, after, before } ) => {
 	const { primaryStart, primaryEnd, secondaryStart, secondaryEnd } = getDateValue(
 		period,
 		compare,
-		start,
-		end
+		after,
+		before
 	);
 
 	return {
 		primary: {
 			label: find( presetValues, item => item.value === period ).label,
 			range: getRangeLabel( primaryStart, primaryEnd ),
-			start: primaryStart,
-			end: primaryEnd,
+			after: primaryStart,
+			before: primaryEnd,
 		},
 		secondary: {
 			label: find( compareValues, item => item.value === compare ).label,
 			range: getRangeLabel( secondaryStart, secondaryEnd ),
-			start: secondaryStart,
-			end: secondaryEnd,
+			after: secondaryStart,
+			before: secondaryEnd,
 		},
 	};
 };