99 lines
2.9 KiB
HTML
99 lines
2.9 KiB
HTML
{% from "components/alert.html" import Alert %}
|
|
{% from "components/icon.html" import Icon %}
|
|
|
|
{% macro DatePicker(
|
|
field,
|
|
label=field.label | striptags,
|
|
description=field.description,
|
|
mindate=None,
|
|
maxdate=None,
|
|
watch=False,
|
|
optional=True) -%}
|
|
|
|
<date-selector
|
|
{% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
|
|
{% if mindate %}mindate="{{ mindate.strftime("%Y-%m-%d") }}"{% endif %}
|
|
name-tag='{{ field.name }}'
|
|
initialmonth="{{ field.data.month }}"
|
|
initialday="{{ field.data.day }}"
|
|
initialyear="{{ field.data.year }}"
|
|
v-bind:watch='{{ watch | string | lower }}'
|
|
:optional='{{ optional | string | lower }}'
|
|
inline-template>
|
|
|
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
{{ label }}
|
|
</div>
|
|
|
|
{% if caller %}
|
|
{{ caller() }}
|
|
{% endif %}
|
|
|
|
{% if description %}
|
|
<p class='usa-input__help'>
|
|
{{ description | safe }}
|
|
</p>
|
|
{% endif %}
|
|
</legend>
|
|
|
|
<div class="date-picker-component">
|
|
<input name="{{ field.name }}" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
|
|
|
<div class="usa-form-group usa-form-group-month">
|
|
<label>{{ 'components.date_selector.month' | translate }}</label>
|
|
<input
|
|
name="date-month"
|
|
max="12"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
|
v-model="month"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-day">
|
|
<label>{{ 'components.date_selector.day' | translate }}</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"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-year">
|
|
<label>{{ 'components.date_selector.year' | translate }}</label>
|
|
<input
|
|
id="date-year"
|
|
maxlength="4"
|
|
type="number"
|
|
v-model="year"
|
|
{% if maxdate %}max="{{ maxdate.year }}"{% endif %}
|
|
{% if mindate %}min="{{ mindate.year }}"{% endif %}
|
|
v-on:change="onInput"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div v-if="showValidation">
|
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
|
{{ Icon("ok", classes="icon--green") }}
|
|
</div>
|
|
<div class="usa-form-group-date-ok" v-else>
|
|
{{ Icon("alert", classes="icon--red")}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</date-selector>
|
|
|
|
{%- endmacro %}
|