pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
leigh-mil 2019-09-25 15:58:04 -04:00
parent ad86dc33fc
commit c03820e53a
6 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/date_selector.js
View File

@ -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) {

4
js/components/pop_date_range.js
View File

@ -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)) {

2
js/test_templates/clin_fields.html
View File

@ -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 }">

2
js/test_templates/pop_date_range.html
View File

@ -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 }">

4
js/test_templates/to_form.html
View File

@ -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">

2
templates/components/pop_date_range.html
View File

@ -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 }">