fv-inputbox.fv-datepicker(:invalid="!fvValidate",
:placeholder="placeholder",
:disabled="disabled",
:value="value",
:input="true",
input-type="tel",
:search-query.sync="searchQuery",
@typing="onTyping",
@input-keydown="onKeydown",
@value-delete="deleteValue",
:delete-button="deleteButton",
@blur="searchQuery = ''",
tabindex="",
@open="onOpen",
:caret-icon="icons.icon",
ref="inputBox")
template(slot="value", slot-scope="scope")
slot(v-if="$scopedSlots.value || $slots.value", name="value", :value="scope.value")
span(v-else, v-text="defaultFormattedValue")
.fv-datepicker-box(slot="out")
.header
.fv-input-group.header-buttons
fv-button.fv-size-sm(@click.prevent="moveValue('year', -1)", tabindex="-1")
.icon(:style="{ transform: icons.prevYear }", v-html="icons.iconY")
fv-button.fv-size-sm(@click.prevent="moveValue('month', -1)", tabindex="-1")
.icon(:style="{ transform: icons.prevMonth }", v-html="icons.icon")
.fv-grow.fv-text-center
b(v-text="monthNames[visualProps.month - 1]")
=" "
span(v-text="visualProps.year")
.fv-input-group.header-buttons
fv-button.fv-size-sm(@click.prevent="moveValue('month', 1)", tabindex="-1")
.icon(:style="{ transform: icons.nextMonth }", v-html="icons.icon")
fv-button.fv-size-sm(@click.prevent="moveValue('year', 1)", tabindex="-1")
.icon(:style="{ transform: icons.nextYear }", v-html="icons.iconY")
.content
table
thead
tr
td(v-for="weekDay in weekDayNames",
v-html="weekDay")
tbody
tr(v-for="dp in 6")
td(v-for="d in dpRow(dp, editingValue.getMonth(), editingValue.getFullYear())",
:disabled="d.disabled",
@click="selectDate(d.date, $event)",
:class="{highlighted: d.highlighted, selected: d.selected, hidden: d.hidden}",
v-html="d.realDate")