Date before/after in form and filtering

wp-content/themes/midwestenergynews/inc/digest-search.php

@@ -50,6 +50,36 @@ function mwen_region_search_query( $query ) {
 			$query->set( 'tax_query', $tax_query );
 		}
 
+		$date_query = array();
+
+		if ( isset( $_GET['after'] ) && ! empty( $_GET['after'] ) ) {
+			/*
+			 * browsers with standards-compliant datepickers will submit a value in YYYY-MM-DD, according
+			 * to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date .
+			 * @link: https://developer.wordpress.org/reference/classes/wp_query/#date-parameters
+			 */
+			$maybe_after = sanitize_key( $_GET['after'] );
+			if ( ! empty( $maybe_after ) && 1 === preg_match( '/^\d{4}-\d{2}-\d{2}$/', $maybe_after ) ) {
+				$date_query['before'] = $maybe_after;
+			}
+		}
+
+		if ( isset( $_GET['before'] ) && ! empty( $_GET['before'] ) ) {
+			/*
+			 * browsers with standards-compliant datepickers will submit a value in YYYY-MM-DD, according
+			 * to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date .
+			 * @link: https://developer.wordpress.org/reference/classes/wp_query/#date-parameters
+			 */
+			$maybe_before = sanitize_key( $_GET['before'] );
+			if ( ! empty( $maybe_before ) && 1 === preg_match( '/^\d{4}-\d{2}-\d{2}$/', $maybe_before ) ) {
+				$date_query['before'] = $maybe_before;
+			}
+		}
+
+		if ( ! empty( $date_query ) ) {
+			$query->set( 'date_query', $date_query );
+		}
+
 		if ( $query->is_category( 'digest' ) ) {
 			// as a temporary thing because LMP isn't working at this time
 			$query->set( 'posts_per_page', 20 );

wp-content/themes/midwestenergynews/less/digest-search.less

@@ -3,18 +3,49 @@
  */
 .digest-search {
 	margin-top: 1em;
+	padding-top: 1em;
+	padding-bottom: 1em;
+	border-bottom: 1px solid @greyXL;
 	margin-bottom: 1em;
 
+	.input-append {
+		display: flex;
+		input {
+			flex: 1 1 auto;
+		}
+		button {
+			flex: 0 1 auto;
+		}
+	}
+
 	legend {
 		line-height: 1;
-		margin-top: 1em;
+		margin-top: 0;
 		font-size: 1rem;
 		border-bottom: none;
 	}
 	label.checkbox + label.checkbox {
 		margin-left: 2ch;
 	}
-
-	padding-bottom: 1em;
-	border-bottom: 1px solid @greyXL;
+}
+
+#filter-buttons,
+#date-filter {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+#date-filter {
+	display: flex;
+	flex-wrap: nowrap;
+
+	label {
+		flex: 1 1 50%;
+	}
+
+	label input {
+		clear: both;
+		width: 100%;
+		box-sizing: border-box;
+	}
 }

wp-content/themes/midwestenergynews/partials/digest-search.php

@@ -4,11 +4,49 @@
  *
  * @link https://github.com/INN/umbrella-energynewsnetwork/issues/77
  */
+
+$after= '';
+$before = '';
+
+if ( isset( $_GET['after'] ) && ! empty( $_GET['after'] ) ) {
+	$maybe_after = sanitize_key( $_GET['after'] );
+	if ( ! empty( $maybe_after ) && 1 === preg_match( '/^\d{4}-\d{2}-\d{2}$/', $maybe_after ) ) {
+		$after = $maybe_after;
+	}
+}
+if ( isset( $_GET['before'] ) && ! empty( $_GET['before'] ) ) {
+	$maybe_before = sanitize_key( $_GET['before'] );
+	if ( ! empty( $maybe_before ) && 1 === preg_match( '/^\d{4}-\d{2}-\d{2}$/', $maybe_before ) ) {
+		$before = $maybe_before;
+	}
+}
+
+
 ?>
 <form class="digest-search form-search" role="search" method="get" action="<?php echo esc_url( get_term_link( get_queried_object())); ?>">
 	<div class="input-append">
 		<input type="text" placeholder="<?php _e('Search', 'largo'); ?>" class="searchbox search-query" value="<?php the_search_query(); ?>" name="digest-search" /><button type="submit" name="search submit" class="search-submit btn"><?php _e('Go', 'largo'); ?></button>
 	</div>
+	<fieldset id="date-filter" name="date-selectors">
+		<label for="after">
+			<?php esc_html_e( 'Digests after:', 'enn' ); ?>
+			<input
+				type="date"
+				name="after"
+				pattern="\d{4}-\d{2}-\d{2}"
+				value="<?php esc_attr_e( $after ); ?>"
+			>
+		</label>
+		<label for="before">
+			<?php esc_html_e( 'Digests before:', 'enn' ); ?>
+			<input
+				type="date"
+				name="before"
+				pattern="\d{4}-\d{2}-\d{2}"
+				value="<?php esc_attr_e( $before ); ?>"
+			>
+		</label>
+	</fieldset>
 
 	<fieldset id="filter-buttons" name="region-selectors">
 		<legend>Select a region:</legend>