Bootstrap Twitter 3 Modal 和 Bootstrap 3 Datepicker 冲突答案

【问题标题】：Bootstrap Twitter 3 Modal and Bootstrap 3 Datepicker confilctBootstrap Twitter 3 Modal 和 Bootstrap 3 Datepicker 冲突
【发布时间】：2015-06-22 22:33:33
【问题描述】：

我有一个模态，在模态中我有一个表单，在表单中我有日期输入元素。我想使用 Bootstrap 3 Datepicker，但我不工作。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <input type='text' class="form-control" id='datetimepicker4' />
    </div>
</div>

然后是我的脚本

<script type="text/javascript">
$(function () {
    $('#datetimepicker4').datetimepicker({
        format: 'DD-MM-YYYY',
        locale: 'it'
    });

最奇怪的是，当我点击输入时，我得到今天的日期，但我看不到日期选择器。

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-datepicker

【解决方案1】：

请查看此帖子中的答案： IE not rendering DatePicker for MVC5

他们正在使用： @Html.TextBoxFor

根据我的研究，输入类型在IE浏览器中没有完全支持HTML5。

我的工作代码：- 索引.cshtml

         <div class="panel-body ">
                <a data-toggle='modal' data-target='#myModal' href='/Queens/Create/'>
<b> CREATE NEW RECORD</b>
</a>

        </div>

<script type="text/javascript">

        $(document).ready(

        //this script reset modal each time when you click on the link:
        $(function () {
            //$('body').on('click', '.modal-link', function () {
            $(".modal-link").click(function (event) {
                //event.preventDefault();
                // $('#myModal').removeData("modal");
                /*   $("#myModal").modal({

                       backdrop: 'static',
                       keyboard: false
                   }, 'show')*/
                $("#myModal").modal();

                $("#myModal").css("z-index", "1500");
            });
            return false;
        }));
    </script>
<div id="myModal" class="modal fade in" data-keyboard="false" data-backdrop="false" >
    <div class="modal-dialog">
        <div class="modal-content">

            <div id='myModalContent'></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

然后创建页面就有了。

<script>
    $(function () {
        $('.datepicker').datepicker(
            {
                format: "yyyy/mm/dd",
                pickDate: true
            }
            );
        $(".datepicker").datepicker('setValue', new Date());
    });
</script>



<div class="form-group">
                        @Html.LabelFor(model => model.Date, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">



                        @Html.TextBoxFor(model => model.Date, new { @class = "datepicker" })


                            @Html.ValidationMessageFor(model => model.Date)
                            </div>
                        </div>

对我来说，我无法在日期选择器上选择任何日期，但对于大多数人来说，它似乎可以工作。使用模型中的此注释，内置日期选择器一切正常 Chrome 和 Mozilla 中的 [DataType(DataType.Date)]。希望这会有所帮助。

【讨论】：