Merge pull request #6009 from cfpb/ans_filters_datepicker

Filterable list control: Convert date inputs into datepicker fields

cfgov/unprocessed/css/enhancements/forms.less

@@ -337,6 +337,14 @@ input {
     margin-top: 0;
 }
 
+/*
+ * Sets minimum height when an input is a datepicker.
+ * This is for an issue in iOS Safari where the input is collapsed.
+ */
+input[type=date] {
+    min-height: unit( 35px / @base-font-size-px, rem );
+}
+
 /* topdoc
   name: EOF
   eof: true

cfgov/unprocessed/js/modules/util/validators.js

@@ -20,6 +20,14 @@ import ERROR_MESSAGES from '../../config/error-messages-config';
  */
 function date( field, currentStatus ) {
   const status = currentStatus || {};
+  let valueToEval = field.value;
+
+  /* TODO: Merge this into the regex checks.
+           This converts numbers from any other format to MM/DD/YYYY */
+  if ( !isNaN( field.valueAsNumber ) ) {
+    const date = new Date( field.valueAsNumber );
+    valueToEval = `${ date.getUTCMonth() + 1 }/${ date.getUTCDate() }/${ date.getUTCFullYear() }`;
+  }
 
   /* Date regexes match the date patterns that are
      allowed in cfgov/v1/forms.py FilterableDateField */
@@ -32,15 +40,16 @@ function date( field, currentStatus ) {
   const dayMonthYearRegex =
     /^(?:\d{1}|\d{2})(?:\-|\/)(?:\d{1}|\d{2})(?:\-|\/)(?:\d{4}|\d{2})$/;
 
-  const inputIsValid = yearRegex.test( field.value ) ||
-    monthYearRegex.test( field.value ) ||
-    dayMonthYearRegex.test( field.value );
+  const inputIsValid = yearRegex.test( valueToEval ) ||
+                       monthYearRegex.test( valueToEval ) ||
+                       dayMonthYearRegex.test( valueToEval );
 
-  if ( field.value && !inputIsValid ) {
+  if ( valueToEval && !inputIsValid ) {
     status.msg = status.msg || '';
     status.msg += ERROR_MESSAGES.DATE.INVALID;
     status.date = false;
   }
+
   return status;
 }
 

cfgov/v1/forms.py

@@ -27,6 +27,7 @@ def validate_after_1900(date):
         '%m-%d-%y',     # 10-25-16, 9-1-16
         '%m/%d/%Y',     # 10/25/2016, 9/1/2016
         '%m-%d-%Y',     # 10-25-2016, 9-1-2016
+        '%Y-%m-%d',     # 2016-10-25, 2016-9-1
         '%m/%Y',        # 10/2016, 7/2017
         '%m-%Y',        # 10-2016, 7-2017
         '%m/%y',        # 10/16, 4/18
@@ -36,7 +37,7 @@ def validate_after_1900(date):
 
     default_widget_attrs = {
         'class': 'a-text-input a-text-input__full',
-        'type': 'text',
+        'type': 'date',
         'placeholder': 'mm/dd/yyyy',
         'data-type': 'date'
     }
@@ -102,7 +103,7 @@ class FilterableListForm(forms.Form):
         })
     )
 
-    preferred_datetime_format = '%m/%d/%Y'
+    preferred_datetime_format = '%Y-%m-%d'
 
     def __init__(self, *args, **kwargs):
         self.filterable_pages = kwargs.pop('filterable_pages')

cfgov/v1/util/date_filter.py

@@ -3,21 +3,27 @@
 from dateutil.relativedelta import relativedelta
 
 
+# This utility file exists to support date input fields that are typeable
+# text inputs, which occur in browsers that don't support the date input field
+# https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+
 # For more information on date formatting, see the python documentation here:
 # https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior
 
 full_date_patterns = (
-    '%m/%d/%Y',     # 10/25/2016, 9/1/2016
-    '%m-%d-%Y',     # 10-25-2016, 9-1-2016
-    '%m/%d/%y',     # 10/25/16, 9/1/16
-    '%m-%d-%y',     # 10-25-16, 9-1-16
+    '%m/%d/%Y',     # 10/25/2016, 09/01/2016
+    '%m-%d-%Y',     # 10-25-2016, 09-01-2016
+    '%Y-%m-%d',     # 2016-10-25, 2016-09-01
+    '%m/%d/%y',     # 10/25/16, 09/01/16
+    '%m-%d-%y',     # 10-25-16, 09-01-16
 )
 
 month_year_date_patterns = (
-    '%m/%Y',        # 10/2016, 7/2017
-    '%m-%Y',        # 10-2016, 7-2017
-    '%m/%y',        # 10/16, 4/18
-    '%m-%y',        # 10-16, 4-18
+    '%m/%Y',        # 10/2016, 07/2017
+    '%m-%Y',        # 10-2016, 07-2017
+    '%Y-%m',        # 2016-10, 2017-07
+    '%m/%y',        # 10/16, 04/18
+    '%m-%y',        # 10-16, 04-18
 )
 
 year_date_patterns = (

test/cypress/integration/components/filterable-lists.js

@@ -18,8 +18,8 @@ describe( 'Filterable List', () => {
     filterableList.open();
     filterableList.showFilters();
     filterableList.filterForm().should( 'be.visible' );
-    filterableList.setFromDate( '01/01/2010' );
-    filterableList.setToDate( '01/01/2020' );
+    filterableList.setFromDate( '2010-01-01' );
+    filterableList.setToDate( '2020-01-01' );
     filterableList.applyFilters();
     filterableList.filterNotification().should( 'be.visible' );
   } );