.u-datetime
input.form-control(:type="inputType", :value="rfcDateTime", @click='togglePicker', :class="{ 'is-invalid': !!error }")
.invalid-feedback(v-if="error") {{ error }}
.overlay(v-if='showPicker', @click='togglePicker')
.picker.bg-white(v-if='showPicker')
.scroll(v-if='showScroll' ref='scroll')
ul.nav.nav-pills
li.nav-item(v-for='(timeUnit, index) in scrollables[timeUnitName]')
a.nav-link(
v-if='timeUnitName === "month"',
@click='setScrollableTimeUnit(index + 1)',
:class='{ selected: picker[timeUnitName] === index + 1 }'
) {{ timeUnit }}
a.nav-link(
v-else,
@click='setScrollableTimeUnit(index)',
:class='{ selected: picker[timeUnitName] === index }'
) {{ index }}
.main(v-else)
ul.nav.nav-pills(v-if='shouldPickDate')
li.nav-item: a.nav-link(@click='subMonth'): i.fa.fa-arrow-left
li.nav-item: a.nav-link.scrollable(@click='toggleScroll("month")') {{ this.scrollables.month[picker.month - 1] }}
li.nav-item: a.nav-link.text-center(@click='resetMonth'): i.fa.fa-calendar-o
li.nav-item: a.nav-link.scrollable(@click='toggleScroll("year")') {{ picker.year }}
li.nav-item: a.nav-link(@click='addMonth'): i.fa.fa-arrow-right
li.nav-item(v-for='weekday in weekdays'): a.nav-link.unclickable {{ weekday }}
li.nav-item(v-for='item in offsetDays'): a.nav-link.unclickable
li.nav-item(v-for='monthDay in monthDays'): a.nav-link(@click='setDate', :class="{ today: isToday(monthDay.date), selected: monthDay.selected }") {{ monthDay.date }}
ul.nav.nav-pills.my-3(v-if='shouldPickTime')
li.nav-item: a.nav-link.text-center(@click='resetMinute'): i.fa.fa-clock-o
li.nav-item: a.nav-link.scrollable(@click='toggleScroll("hour")') {{ picker.hour }}
li.nav-item: a.nav-link.text-center(@click='resetMinute') :
li.nav-item: a.nav-link.scrollable(@click='toggleScroll("minute")') {{ selected.minute }}
li.nav-item: a.nav-link.text-center(@click='toggleNoon') {{ afterNoon ? 'P.M.' : 'A.M.' }}