Add validation to form for enforcing chronological order of PoP start and end dates

templates/components/date_picker.html

@@ -80,10 +80,10 @@
         </div>
       </div>
 
-      <p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
-        {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
-        {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
-        {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
+      <p class="usa-input-error-message" v-bind:class='{% if field.errors %}"form-has-errors"{% endif %}'>
+        {% if field.errors %}
+          {{ field.errors[0] }}
+        {% endif %}
       </p>
     </fieldset>
   </date-selector>