From c03820e53ad1360bfce1367191ec989e4a14bc07 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 25 Sep 2019 15:58:04 -0400
Subject: [PATCH] Emit event on input from date selector so parent element can
 respond

---
 js/components/date_selector.js           | 6 ++++++
 js/components/pop_date_range.js          | 4 ----
 js/test_templates/clin_fields.html       | 2 ++
 js/test_templates/pop_date_range.html    | 2 ++
 js/test_templates/to_form.html           | 4 ++--
 templates/components/pop_date_range.html | 2 ++
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index b12d4986..f0c83b12 100644
--- a/js/components/date_selector.js
+++ b/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) {
diff --git a/js/components/pop_date_range.js b/js/components/pop_date_range.js
index 654ad4ed..54f54e65 100644
--- a/js/components/pop_date_range.js
+++ b/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)) {
diff --git a/js/test_templates/clin_fields.html b/js/test_templates/clin_fields.html
index a4ffa8ad..15d3027a 100644
--- a/js/test_templates/clin_fields.html
+++ b/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 }">
diff --git a/js/test_templates/pop_date_range.html b/js/test_templates/pop_date_range.html
index 0852802d..1c70e5e9 100644
--- a/js/test_templates/pop_date_range.html
+++ b/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 }">
diff --git a/js/test_templates/to_form.html b/js/test_templates/to_form.html
index 61e2e502..6d091370 100644
--- a/js/test_templates/to_form.html
+++ b/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">
diff --git a/templates/components/pop_date_range.html b/templates/components/pop_date_range.html
index d5431916..b4f6e540 100644
--- a/templates/components/pop_date_range.html
+++ b/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 }">