Emit event on input from date selector so parent element can respond

js/components/date_selector.js

@@ -195,6 +195,12 @@ export default {
         watch: this.watch,
         valid: this.isDateValid,
       })
+
+      this.$emit('date-change', {
+        value: this.formattedDate,
+        name: this.name,
+        valid: this.isDateValid,
+      })
     },
 
     _emitChange: function(name, value, valid) {

js/components/pop_date_range.js

@@ -44,10 +44,6 @@ export default {
     }
   },
 
-  mounted: function() {
-    this.$root.$on('field-change', this.handleDateChange)
-  },
-
   methods: {
     handleDateChange: function(event) {
       if (event.name.includes(START_DATE)) {

js/test_templates/clin_fields.html

@@ -342,6 +342,7 @@
             
             v-bind:watch='true'
             :optional='false'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
@@ -441,6 +442,7 @@
             
             v-bind:watch='true'
             :optional='false'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">

js/test_templates/pop_date_range.html

@@ -27,6 +27,7 @@
             
             v-bind:watch='false'
             :optional='true'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
@@ -126,6 +127,7 @@
             
             v-bind:watch='false'
             :optional='true'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">

js/test_templates/to_form.html

@@ -203,7 +203,7 @@
 <div>
 <div class="form-row">
 <div class="form-col">
-<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-bind:watch="true">
+<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-bind:watch="true" v-on:date-change="handleDateChange">
 <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
 <legend>
 <div class="usa-input__title">
@@ -251,7 +251,7 @@
 </div>
 <div class="form-row">
 <div class="form-col">
-<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-bind:watch="true">
+<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-bind:watch="true" v-on:date-change="handleDateChange">
 <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
 <legend>
 <div class="usa-input__title">

templates/components/pop_date_range.html

@@ -34,6 +34,7 @@
             {% endif %}
             v-bind:watch='{{ watch | string | lower }}'
             :optional='{{ optional | string | lower }}'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
@@ -128,6 +129,7 @@
             {% endif %}
             v-bind:watch='{{ watch | string | lower }}'
             :optional='{{ optional | string | lower }}'
+            v-on:date-change='handleDateChange'
             inline-template>
 
             <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">