diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index 808c764b..5d396c61 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -1,11 +1,11 @@
 import DateSelector from './date_selector'
-import optionsinput from './options_input'
 import textinput from './text_input'
 
 export default {
   name: 'clin-fields',
 
   components: {
+    DateSelector,
     textinput,
   },
 
diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index 0943bd0b..18bd2c6e 100644
--- a/js/components/date_selector.js
+++ b/js/components/date_selector.js
@@ -19,6 +19,7 @@ export default {
     initialyear: { type: String },
     mindate: { type: String },
     maxdate: { type: String },
+    nameTag: { type: String }
   },
 
   data: function() {
@@ -26,6 +27,7 @@ export default {
       day: this.initialday,
       month: this.initialmonth,
       year: this.initialyear,
+      name: this.nameTag,
     }
   },
 
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index eee3d470..6883a5d0 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -1,6 +1,7 @@
 {% extends "portfolios/base.html" %}
 
 {% from 'components/date_picker.html' import DatePicker %}
+{% from 'components/icon.html' import Icon %}
 {% from 'components/save_button.html' import SaveButton %}
 {% from 'components/options_input.html' import OptionsInput %}
 {% from 'components/text_input.html' import TextInput %}
@@ -8,6 +9,7 @@
 
 {% macro CLINFields(fields) %}
   <div>
+    <hr>
     {{ OptionsInput(fields.jedi_clin_type) }}
     {{ TextInput(fields.number) }}
     {{ DatePicker(fields.start_date) }}
@@ -67,60 +69,117 @@
                     <input type="text" :id="'clins-' + clinIndex + '-number'" placeholder="">
                     <input type="hidden" :name="'clins-' + clinIndex + '-number'">
                   </div>
-                  <fieldset class="usa-input date-picker">
-                    <legend>
-                      <div class="usa-input__title"> Start Date
+
+                  <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
+                    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                      <legend>
+                        <div class="usa-input__title">
+                          Start of period of performance (PoP)
+                        </div>
+                      </legend>
+
+                      <div class="date-picker-component">
+                        <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                        <div class="usa-form-group usa-form-group-month">
+                          <label>Month</label>
+                          <input
+                            name="date-month"
+                            max="12"
+                            maxlength="2"
+                            min="1"
+                            type="number"
+                            v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                            v-model="month"
+                          />
+                        </div>
+
+                        <div class="usa-form-group usa-form-group-day">
+                          <label>Day</label>
+                          <input
+                            name="date-day"
+                            maxlength="2"
+                            min="1"
+                            type="number"
+                            v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                            v-bind:max="daysMaxCalculation"
+                            v-model="day"
+                          />
+                        </div>
+
+                        <div class="usa-form-group usa-form-group-year">
+                          <label>Year</label>
+                          <input
+                            name="date-year"
+                            maxlength="4"
+                            type="number"
+                            v-model="year"
+                          />
+
+                        </div>
+
+                        <div class="usa-form-group-date-ok" v-if="isDateValid">
+                          {{ Icon("ok", classes="icon--green") }}
+                        </div>
                       </div>
-                    </legend>
-                    <div class="date-picker-component">
-                      <input :name="'clins-' + clinIndex + '-start_date'" type="hidden">
-                      <div class="usa-form-group usa-form-group-month">
-                        <label>Month
-                        </label>
-                        <input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
+                    </fieldset>
+                  </date-selector>
+
+                  <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" inline-template>
+                    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                      <legend>
+                        <div class="usa-input__title">
+                          End of period of performance (PoP)
+                        </div>
+                      </legend>
+
+                      <div class="date-picker-component">
+                        <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                        <div class="usa-form-group usa-form-group-month">
+                          <label>Month</label>
+                          <input
+                            name="date-month"
+                            max="12"
+                            maxlength="2"
+                            min="1"
+                            type="number"
+                            v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                            v-model="month"
+                          />
+                        </div>
+
+                        <div class="usa-form-group usa-form-group-day">
+                          <label>Day</label>
+                          <input
+                            name="date-day"
+                            maxlength="2"
+                            min="1"
+                            type="number"
+                            v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                            v-bind:max="daysMaxCalculation"
+                            v-model="day"
+                          />
+                        </div>
+
+                        <div class="usa-form-group usa-form-group-year">
+                          <label>Year</label>
+                          <input
+                            name="date-year"
+                            maxlength="4"
+                            type="number"
+                            v-model="year"
+                          />
+
+                        </div>
+
+                        <div class="usa-form-group-date-ok" v-if="isDateValid">
+                          {{ Icon("ok", classes="icon--green") }}
+                        </div>
                       </div>
-                      <div class="usa-form-group usa-form-group-day">
-                        <label>Day
-                        </label>
-                        <input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
-                      </div>
-                      <div class="usa-form-group usa-form-group-year">
-                        <label>Year
-                        </label>
-                        <input id="date-year" maxlength="4" type="number">
-                      </div>
-                      <!---->
-                    </div>
-                    <p class="usa-input-error-message">
-                    </p>
-                  </fieldset>
-                  <fieldset class="usa-input date-picker">
-                    <legend>
-                      <div class="usa-input__title"> End Date
-                      </div>
-                    </legend>
-                    <div class="date-picker-component">
-                      <input :name="'clins-' + clinIndex + '-end_date'" type="hidden">
-                      <div class="usa-form-group usa-form-group-month">
-                        <label>Month
-                        </label>
-                        <input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
-                      </div>
-                      <div class="usa-form-group usa-form-group-day">
-                        <label>Day
-                        </label>
-                        <input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
-                      </div>
-                      <div class="usa-form-group usa-form-group-year">
-                        <label>Year
-                        </label>
-                        <input id="date-year" maxlength="4" type="number">
-                      </div>
-                      <!---->
-                    </div>
-                    <p class="usa-input-error-message">
-                    </p>
-                  </fieldset>
+                    </fieldset>
+                  </date-selector>
+
                   <div class="  usa-input usa-input--validation--anything">
                     <label :for="'clins-' + clinIndex + '-obligated_amount'">
                       <div class="usa-input__title"> Obligated Amount