datepicker的下拉菜單顯示angularjs模式內的錯誤

Question

我在AngularJS模式內使用jquery datepicker bootstrap-datepicker。問題在於屏幕上下拉菜單的位置錯誤。我認爲是與模態相關的東西，因爲在模態之外它是可以的。我使用bootstrap 3.1.1。 我已經嘗試設置z-index：1151，但這不起作用。有人能幫助我嗎？

HTML：

<div class="modal fade" tabindex='-1'> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" ng-click="close('N')" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">{{ModalController.label + titulo}}</h4> 
      </div> 
      <div class="modal-body"> 
      <form name="myFormNewColab" method="post"> 
       <div class="form-group" ng-show="tipo=='Colaborador'&&op==1"> 
        <label>Nome do colaborador: *</label> 
        <input type="text" name="newColab" class="form-control" ng-value="nome" ng-model="newColab" required/> 
       </div> 
      </form> 
      <form name="myFormColab" method="post"> 
       <div class="form-group" ng-show="tipo=='Lavoura'&&op==1"> 
        <label>Nome do colaborador: *</label> 
        <select name="novoColaborador" ng-model="novoColaborador" ng-change="changedColab(novoColaborador)" ng-options="x.coNome for x in colabs" class="form-control" required></select> 
        <label>Data Colheita: *</label> 
        <div id="datapicker-container"> 
         <input name="novaDataCol" class="form-control dp2" ng-model="novaDataCol" value="dataCol" required/> 
        </div> 
        <label>Selecione a roça: *</label> 
        <select ng-model="roOption" name="roOption" class="form-control" ng-change="changedRoca(roOption)" ng-options="x.roNome for x in rocas" required></select> 
        <label>Selecione a planta: *</label> 
        <select ng-disabled="myFormColab.roOption.$invalid||plantsRoc.length<=0" ng-model="plOption" name="plOption" class="form-control" ng-change="changedPlanta(plOption)" ng-options="x.plNome for x in plantsRoc" required></select> 
        <label>Variedade da planta: *</label> 
        <input type="text" ng-model="vrOption" ng-value="pl_variedade" name="vrOption" class="form-control" disabled/> 
        <label>Quantidade de caixas: *</label> 
        <input type="number" name="novoQtdPlantas" class="form-control" min="1" ng-model="novoQtdPlantas" required/> 
       </div> 
      </form> 

JS：

  $scope.$watch('dataCol', function() { 
       $('.dp2').datepicker({ 
        format: "dd/mm/yyyy", 
        clearBtn: true, 
        todayBtn: true, 
        todayHighlight: true, 
        autoclose: true 
       }).bind('changeDate', function onDateChange(ev) { 
        $scope.novaDataCol = ev.date; 
       }); 
      }); 

編輯： link to image of the problem

EDIT2：問題解決了！我使用的是舊版bootstrap，無法支持此功能。我已經更新到版本1.7.1。

Answer 1

您可以使用import {DatePipe} from "@angular/common";指令，以您的格式轉換像

const datePipe= new DatePipe('en-US'); 
this.item.birthDate = datePipe.transform(data['birthDate'], 'yyyy-MM-dd');