Bug fixes for date picker component

atst/routes/users.py

@@ -38,4 +38,11 @@ def update_user():
         if next_url:
             return redirect(next_url)
 
-    return render_template("user/edit.html", form=form, user=user, next=next_url)
+    return render_template(
+        "user/edit.html",
+        form=form,
+        user=user,
+        next=next_url,
+        mindate=(dt.datetime.now() - dt.timedelta(days=365)),
+        maxdate=dt.datetime.now(),
+    )

js/components/date_selector.js

@@ -12,7 +12,7 @@ var paddedNumber = function(number) {
 export default Vue.component('date-selector', {
   props: ['initialday', 'initialmonth', 'initialyear', 'mindate', 'maxdate'],
 
-  data: function() {
+  data() {
     return {
       day: this.initialday,
       month: this.initialmonth,
@@ -20,35 +20,55 @@ export default Vue.component('date-selector', {
     }
   },
 
-  computed: {
+  watch: {
-    formattedDate: function() {
+    month(newMonth, oldMonth) {
-      if (!this.isDateValid) {
+      if (!!newMonth && newMonth.length > 2) {
-        return null
+        this.month = oldMonth
       }
+    },
 
+    day(newDay, oldDay) {
+      if (!!newDay && newDay.length > 2) {
+        this.day = oldDay
+      }
+    },
+
+    year(newYear, oldYear) {
+      if (!!newYear && newYear.length > 4) {
+        this.year = oldYear
+      }
+    },
+  },
+
+  computed: {
+    formattedDate() {
       let day = paddedNumber(this.day)
       let month = paddedNumber(this.month)
 
+      if (!day || !month || !this.year) {
+        return null
+      }
+
       return `${month}/${day}/${this.year}`
     },
 
-    isMonthValid: function() {
+    isMonthValid() {
       var _month = parseInt(this.month)
 
       return _month >= 0 && _month <= 12
     },
 
-    isDayValid: function() {
+    isDayValid() {
       var _day = parseInt(this.day)
 
       return _day >= 0 && _day <= this.daysMaxCalculation
     },
 
-    isYearValid: function() {
+    isYearValid() {
       return parseInt(this.year) >= 1
     },
 
-    isWithinDateRange: function() {
+    isWithinDateRange() {
       let _mindate = this.mindate ? Date.parse(this.mindate) : null
       let _maxdate = this.maxdate ? Date.parse(this.maxdate) : null
       let _dateTimestamp = Date.UTC(this.year, this.month - 1, this.day)
@@ -64,7 +84,7 @@ export default Vue.component('date-selector', {
       return true
     },
 
-    isDateValid: function() {
+    isDateValid() {
       return (
         this.day &&
         this.month &&
@@ -76,7 +96,7 @@ export default Vue.component('date-selector', {
       )
     },
 
-    daysMaxCalculation: function() {
+    daysMaxCalculation() {
       switch (parseInt(this.month)) {
         case 2: // February
           if (this.year) {
@@ -100,7 +120,7 @@ export default Vue.component('date-selector', {
     },
   },
 
-  render: function(createElement) {
+  render(createElement) {
     return createElement('p', 'Please implement inline-template')
   },
 })

styles/components/_forms.scss

@@ -116,7 +116,7 @@
   }
 }
 
-.date-picker {
+.usa-input.date-picker {
   display: inline-block;
   margin-top: 10px;
   width: 100%;
@@ -138,7 +138,13 @@
     }
   }
 
+  input.usa-input-error:focus {
+    border-color: $color-red !important;
+    box-shadow: none;
+  }
+
   input.usa-input-error {
+    padding-left: 11px;
     right: 0;
   }
 
@@ -147,8 +153,16 @@
   }
 
   p.usa-input-error-message {
-    padding-top: 20px;
     display: inline-block;
+    line-height: 26px;
+    margin-bottom: 0;
+    padding-top: 10px;
+    visibility: hidden;
+    width: 100%;
+
+    &.form-has-errors {
+      visibility: inherit;
+    }
   }
 }
 

templates/components/date_picker.html

@@ -13,7 +13,7 @@
     <div class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
 
       <div class="date-picker-component">
-        <input v-bind:value="formattedDate" type="hidden" />
+        <input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />
 
         <div class="usa-form-group usa-form-group-month">
           <label>Month</label>
@@ -58,10 +58,10 @@
         </div>
       </div>
 
-      <p v-if="!isWithinDateRange" class="usa-input-error-message">
+      <p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
-        {% if maxdate and mindate %}Date must be between {{maxdate.strftime("%Y-%m-%d")}} and {{mindate.strftime("%Y-%m-%d")}}{% endif %}
+        {% if maxdate and mindate %}Date must be between {{maxdate.strftime("%m/%d/%Y")}} and {{mindate.strftime("%m/%d/%Y")}}{% endif %}
-        {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%Y-%m-%d")}}{% 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("%Y-%m-%d")}}{% endif %}
+        {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
       </p>
     </div>
   </date-selector>