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');

datepicker的下拉菜单在angularjs模态中显示错误

1 个答案: