Got the min, max, and range properties to work the way that they used to

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/time-span-controls.vue

@@ -11,11 +11,10 @@
             label="Start date"
             :show-label="false"
             hint-text="mm/dd/yyyy"
-            :min-date="startPicker.minDate"
-            :max-date="startPicker.maxDate"
-            :range-date="startPicker.rangeDate"
-            :disabled="true"
-            :default-value="startPicker.initialValue"
+            :min-date="startMinDate"
+            :max-date="startMaxDate"
+            :range-date="startRangeDate"
+            :default-value="startDate"
             @changeDate="updateStartDate"
           />
           <USWDSDatePicker
@@ -25,10 +24,10 @@
             :show-label="false"
             name="endDate"
             hint-text="mm/dd/yyyy"
-            :min-date="endPicker.minDate"
-            :max-date="endPicker.maxDate"
-            :range-date="endPicker.rangeDate"
-            :default-value="endPicker.initialValue"
+            :min-date="endMinDate"
+            :max-date="endMaxDate"
+            :range-date="endRangeDate"
+            :default-value="endDate"
             @changeDate="updateEndDate"
           />
         </div>
@@ -92,7 +91,7 @@
 
 <script>
 import {useActions} from 'redux-connect-vue';
-import {ref, inject} from 'vue';
+import {ref, computed, inject} from 'vue';
 import config from 'ui/config.js';
 import USWDSAlert from 'ui/uswds-components/alert.vue';
 import USWDSDatePicker from 'ui/uswds-components/date-picker.vue';
@@ -122,18 +121,19 @@ export default {
     const initialTimeSpan = getSelectedTimeSpan(reduxStore.getState());
     const hasDaysBeforeToday = typeof initialTimeSpan === 'string' && initialTimeSpan.endsWith('D');
 
-    const startPicker = {
-      minDate: '1900-01-01',
-      maxDate: initialTimeSpan.end ? initialTimeSpan.end : DateTime.now().toISODate(),
-      rangeDate: initialTimeSpan.end ? initialTimeSpan.end : '',
-      initialValue: initialTimeSpan.start ? initialTimeSpan.start : ''
-    };
-    const endPicker = {
-      minDate: initialTimeSpan.start ? initialTimeSpan.start : '1900-01-01',
-      maxDate: DateTime.now().toISODate(),
-      rangeDate: initialTimeSpan.start ? initialTimeSpan.start : '',
-      initialValue: initialTimeSpan.end ? initialTimeSpan.end : ''
-    };
+    const currentDay = DateTime.now().toISODate();
+    const startDate = ref(initialTimeSpan.start ? initialTimeSpan.start : '');
+    const endDate = ref(initialTimeSpan.end ? initialTimeSpan.end : '');
+
+    const startMinDate = '1900-01-01';
+    const startMaxDate = computed(() => endDate.value ? endDate.value : currentDay);
+    const startRangeDate = computed(() => endDate.value ? endDate.value : '');
+
+    const endMinDate = computed(() => startDate.value ? startDate.value : startMinDate);
+    const endMaxDate = currentDay;
+    const endRangeDate = computed(() => startDate.value ? startDate.value : '');
+
+    const daysBeforeToday = ref(hasDaysBeforeToday ? initialTimeSpan.slice(1, -1) : '');
 
     const errorOptions = {
       noDateOrTime: 'Please enter either a date range or days before today.',
@@ -143,9 +143,6 @@ export default {
     };
     const staticRoot = config.STATIC_URL;
 
-    const startDate = ref(initialTimeSpan.start ? initialTimeSpan.start : '');
-    const endDate = ref(initialTimeSpan.end ? initialTimeSpan.end : '');
-    const daysBeforeToday = ref(hasDaysBeforeToday ? initialTimeSpan.slice(1, -1) : '');
     const primaryErrorMessageText = ref('');
     const datePickerErrorMessageText = ref('');
 
@@ -192,19 +189,21 @@ export default {
     };
 
     const updateStartDate = function(newDate) {
-      endPicker.rangeDate = startDate.value;
       startDate.value = newDate;
-      endPicker.minDate = newDate;
     };
     const updateEndDate = function(newDate) {
-      startPicker.rangeDate = endDate.value;
       endDate.value = newDate;
-      startPicker.maxDate = newDate;
     };
 
     return {
-      startPicker,
-      endPicker,
+      startDate,
+      startMinDate,
+      startMaxDate,
+      startRangeDate,
+      endDate,
+      endMinDate,
+      endMaxDate,
+      endRangeDate,
       datePickerErrorMessageText,
       daysBeforeToday,
       primaryErrorMessageText,

assets/src/scripts/uswds-components/date-picker.vue

@@ -22,6 +22,7 @@
       :data-max-date="maxDate"
       :data-range-date="rangeDate"
       :data-default-value="defaultValue"
+      :disabled="disabled"
     >
       <input
         :id="id"
@@ -38,7 +39,7 @@
 
 <script>
 import uswdsDatePicker from 'uswds-components/usa-date-picker/src/index.js';
-import {ref,  onMounted, onBeforeUnmount} from 'vue';
+import {ref,  onMounted, onBeforeUnmount, toRef, watch} from 'vue';
 
 /*
  * Renders a USWDS date picker
@@ -91,6 +92,10 @@ export default {
     defaultValue: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['changeDate'],
@@ -98,7 +103,6 @@ export default {
     const datePicker = ref(null);
 
     const changeDate = function(event) {
-      console.log ('Date in picker is ' + event.target.value);
       emit('changeDate', event.target.value);
     };