我已经为下面显示的屏幕截图分别添加了tabindex = 1,2和3。但是,选项卡索引1打开日历1并且不关闭它,因此2不起作用,选项卡索引3打开搜索。我该如何解决这个问题?
<div class="col-sm-1 col-md-1 col-lg-1 search-date heightSixty" id="arrivalDate">
<button type="button" class="btn btn-primary calendar-div"
tabindex="4" id="one"
ng-click="vm.arrivalDtOpen($event)"
datepicker-popup="{{'MMM d'}}"
ng-model="vm.searchRQ.arrivalDate"
is-open="vm.arrivalDtOpened"
ng-change="vm.arrivalDateChange()"
datepicker-options="dateOptions"
show-weeks="false"
current-text="Reset To Today's Date"
ng-focus=vm.arrivalDtOpen($event)"
>
<div class="calendar-date-font" title="Select Starting Arrival Date">
{{ vm.searchRQ.arrivalDate | date : 'MMM' }}</br>
</div>
<div class="calendar-date">
{{ vm.searchRQ.arrivalDate | date : 'd' }}
</div>
</button>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 search-date heightSixty" id="departureDate">
<button type="button" class="btn btn-primary calendar-div"
tabindex="5" id="two"
ng-click="vm.departureDtOpen($event)"
datepicker-popup="{{'MMM d'}}"
ng-model="vm.searchRQ.departureDate"
is-open="vm.departureDtOpened"
ng-change="vm.departureDateChange()"
datepicker-options="dateOptions"
ng-focus="vm.departureDtOpen($event)"
show-weeks="false"
current-text="Reset To Today's Date">
<div class="calendar-date-font" title="Select Ending Arrival Date">
{{ vm.searchRQ.departureDate | date : 'MMM' }}</br>
</div>
<div class="calendar-date">
{{ vm.searchRQ.departureDate | date : 'd' }}
</div>
</button>
</div>
<div class="col-sm-2 col-md-2 col-lg-2 search-icon heightSixty">
<button class="btn btn-primary search-button" placeholder=" " title="Search" id="btn-search"
ng-click="vm.retrieveReservation(searchReservationVm.searchRQ)">
<div tabindex="6" class="glyphicon glyphicon-search search-icon-bg" id="searchImg"
ng-focus="vm.departureDtClose($event)">
</div>
</button>
</div>