diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss index 96edf63a..7c549f01 100644 --- a/styles/components/_forms.scss +++ b/styles/components/_forms.scss @@ -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; + } } diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html index b7cdc2f1..b66f7ec0 100644 --- a/templates/components/date_picker.html +++ b/templates/components/date_picker.html @@ -11,13 +11,8 @@ inline-template>
-

- {% 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 %} -

-
+
@@ -62,6 +57,12 @@ {{ Icon("ok", classes="icon--green") }}
+ +

+ {% 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 %} +