Instant Search: Add localization and formatting of all dates

modules/search/class.jetpack-search.php

@@ -222,6 +222,7 @@ public function load_assets() {
 					'postTypes' => get_post_types(),
 					'siteId'		=> Jetpack::get_option( 'id' ),
 					'widgets' 	=> array_values( $widgets ),
+					'locale'    => str_replace( '_', '-', get_locale() ),
 				);
 				/**
 				 * Customize Instant Search Options.

modules/search/instant-search/components/search-app.jsx

@@ -161,6 +161,7 @@ class SearchApp extends Component {
 								initialValues={ this.props.initialFilters }
 								onChange={ this.onChangeFilter }
 								loading={ this.state.isLoading }
+								locale={ this.props.options.locale }
 								postTypes={ this.props.options.postTypes }
 								results={ this.state.response }
 								widget={ widget }
@@ -185,6 +186,7 @@ class SearchApp extends Component {
 						hasNextPage={ this.hasNextPage() }
 						isLoading={ this.state.isLoading }
 						onLoadNextPage={ this.loadNextPage }
+						locale={ this.props.options.locale }
 						query={ this.state.query }
 						response={ this.state.response }
 						resultFormat={ this.props.options.resultFormat }

modules/search/instant-search/components/search-filter-dates.jsx

@@ -4,14 +4,40 @@
  * External dependencies
  */
 import { h, createRef, Component } from 'preact';
-import strip from 'strip';
 import { getCheckedInputNames } from '../lib/dom';
 
 export default class SearchFilterDates extends Component {
 	constructor( props ) {
 		super( props );
 		this.state = { selected: this.props.initialValue };
 		this.filtersList = createRef();
+
+		//this assumes that the configuration never changes and we
+		// may eventually want to adjust it dynamically
+		this.dateOptions = {
+			year: 'numeric',
+			month: 'long',
+		};
+		switch ( this.props.configuration.interval ) {
+			case 'day':
+				this.dateOptions = {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+				};
+				break;
+			case 'month':
+				this.dateOptions = {
+					year: 'numeric',
+					month: 'long',
+				};
+				break;
+			case 'year':
+				this.dateOptions = {
+					year: 'numeric',
+				};
+				break;
+		}
 	}
 
 	getIdentifier() {
@@ -28,6 +54,7 @@ export default class SearchFilterDates extends Component {
 	};
 
 	renderDates = ( { key_as_string: key, doc_count: count } ) => {
+		const { locale = 'en-US' } = this.props;
 		return (
 			<div>
 				<input
@@ -38,7 +65,7 @@ export default class SearchFilterDates extends Component {
 					type="checkbox"
 				/>
 				<label htmlFor={ `jp-instant-search-filter-dates-${ this.getIdentifier() }-${ key }` }>
-					{ strip( key ) } ({ count })
+					{ new Date( key ).toLocaleString( locale, this.dateOptions ) } ({ count })
 				</label>
 			</div>
 		);

modules/search/instant-search/components/search-filters-widget.jsx

@@ -25,6 +25,7 @@ export default class SearchFiltersWidget extends Component {
 						<SearchFilterDates
 							aggregation={ results }
 							configuration={ configuration }
+							locale={ this.props.locale }
 							initialValue={
 								this.props.initialValues[ `${ configuration.interval }_${ configuration.field }` ]
 							}

modules/search/instant-search/components/search-result-minimal.jsx

@@ -4,7 +4,6 @@
  * External dependencies
  */
 import { h, Component } from 'preact';
-import strip from 'strip';
 
 /**
  * Internal dependencies
@@ -40,6 +39,7 @@ class SearchResultMinimal extends Component {
 
 	render() {
 		const { result_type, fields, highlight } = this.props.result;
+		const { locale = 'en-US' } = this.props;
 		const IconSize = 18;
 		if ( result_type !== 'post' ) {
 			return null;
@@ -106,7 +106,9 @@ class SearchResultMinimal extends Component {
 		return (
 			<div className="jetpack-instant-search__result-minimal">
 				<span className="jetpack-instant-search__result-minimal-date">
-					{ strip( fields.date ).split( ' ' )[ 0 ] }
+					{ new Date( fields.date.split( ' ' )[ 0 ] ).toLocaleDateString( locale, {
+						dateStyle: 'short',
+					} ) }
 				</span>
 				<h3>
 					{ postTypeIcon }

modules/search/instant-search/components/search-results.jsx

@@ -19,7 +19,7 @@ class SearchResults extends Component {
 			case 'product':
 			case 'minimal':
 			default:
-				return <SearchResultMinimal result={ result } />;
+				return <SearchResultMinimal result={ result } locale={ this.props.locale } />;
 		}
 	}