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

Move validation error message for date picker component

Browse Source
This commit is contained in:
George Drummond 2019-01-28 10:49:19 -05:00
parent 83dc3b55e6
commit c8ffb4e150
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
styles/components/_forms.scss
View File

@ -121,6 +121,11 @@
margin-top: 10px;
width: 100%;
.date-picker-component {
float: left;
width: 100%;
}
label {
font-weight: 400;
}
@ -140,5 +145,10 @@
.usa-form-group-date-ok {
padding-top: 30px;
}
p.usa-input-error-message {
padding-top: 20px;
display: inline-block;
}
}

13
templates/components/date_picker.html
View File

@ -11,13 +11,8 @@
inline-template>
<div class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
<p v-if="!isWithinDateRange" class="usa-input-error-message">
{% if maxdate and mindate %}Date must be between {{maxdate.strftime("%Y-%m-%d")}} and {{mindate.strftime("%Y-%m-%d")}}{% endif %}
{% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%Y-%m-%d")}}{% endif %}
{% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%Y-%m-%d")}}{% endif %}
</p>
<div>
<div class="date-picker-component">
<input v-bind:value="formattedDate" type="hidden" />
<div class="usa-form-group usa-form-group-month">
@ -62,6 +57,12 @@
{{ Icon("ok", classes="icon--green") }}
</div>
</div>
<p v-if="!isWithinDateRange" class="usa-input-error-message">
{% if maxdate and mindate %}Date must be between {{maxdate.strftime("%Y-%m-%d")}} and {{mindate.strftime("%Y-%m-%d")}}{% endif %}
{% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%Y-%m-%d")}}{% endif %}
{% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%Y-%m-%d")}}{% endif %}
</p>
</div>
</date-selector>