Create vue component to manage date range logic

js/components/clin_fields.js

@@ -7,6 +7,7 @@ import Modal from '../mixins/modal'
 import optionsinput from './options_input'
 import textinput from './text_input'
 import clindollaramount from './clin_dollar_amount'
+import PopDateRange from './pop_date_range'
 
 const TOTAL_AMOUNT = 'total_amount'
 const OBLIGATED_AMOUNT = 'obligated_amount'
@@ -23,6 +24,7 @@ export default {
     optionsinput,
     textinput,
     clindollaramount,
+    PopDateRange,
   },
 
   mixins: [Modal],

js/components/pop_date_range.js

@@ -0,0 +1,30 @@
+import DateSelector from './date_selector'
+
+export default {
+  name: 'pop-date-range',
+
+  components: {
+    DateSelector,
+  },
+
+  props: {
+    initialMinStartDate: String,
+    initialMaxEndDate: String,
+    initialStartDate: String,
+    initialEndDate: String,
+    clinIndex: Number,
+  },
+
+  data: function() {
+    return {
+      startDate: this.initialStartDate,
+      endDate: this.initialEndDate,
+      startValid: false,
+      endValid: false,
+      minStartDate: this.initialMinStartDate,
+      maxStartDate: this.initialMaxEndDate,
+      minEndDate: this.initialMinStartDate,
+      maxEndDate: this.initialMaxEndDate,
+    }
+  },
+}

js/index.js

@@ -32,6 +32,7 @@ import NewEnvironment from './components/forms/new_environment'
 import SemiCollapsibleText from './components/semi_collapsible_text'
 import ToForm from './components/forms/to_form'
 import ClinFields from './components/clin_fields'
+import PopDateRange from './components/pop_date_range'
 
 Vue.config.productionTip = false
 
@@ -65,6 +66,7 @@ const app = new Vue({
     SemiCollapsibleText,
     ToForm,
     ClinFields,
+    PopDateRange,
   },
 
   mounted: function() {