在Firefox上使用modal的奇怪bootstrap-datepicker行为

时间:2015-03-02 03:35:08

标签: twitter-bootstrap firefox bootstrap-datepicker

我在项目上使用bootstrap-datepicker,当日期时间选择器显示在模态上时,它有一个非常奇怪的行为,所有日期都被交换:

enter image description here

这只发生在模态中,滚动内容后和使用Firefox时,在其他所有情况下都能正常工作。

为了完全验证此错误,我创建了一个演示页面:http://tuttipromo.blacklambs.net/Test.aspx

可能是什么问题?

$(document).ready(function ()
                    {

    $('.datepicker').datepicker({
      language: 'pt',
      format: 'dd/mm/yyyy',
      autoclose: true,
      //appendTo: "div.modal",
      orientation: "top"
    });

  });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/locales/bootstrap-datepicker.pt.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalEditCampaign">
                Launch demo modal
            </button>





            <div id="modalEditCampaign" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">
                                DatePicker
                            </h4>
                        </div>
                        <div class="modal-body">

                            <div class="row">

                                <div class="col-md-12 form-horizontal">

                                    <div class="col-sm-6 col-sm-offset-0">
                                        <div class="form-group">
                                            <label for="tbEditCampaignStartDate" class="col-sm-4 control-label">Start</label>
                                            <div class="col-sm-5">
                                                <input type="text" name="startDate" class="form-control input-normal datepicker" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-5">
                                        <div class="form-group">
                                            <label for="tbEditCampaignEndDate" class="col-sm-5 control-label">End</label>
                                            <div class="col-sm-6">
                                                <input type="text" name="endDate" class="form-control input-normal datepicker" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-12"></div>

                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>

0 个答案:

没有答案