Question

我有一个模态，在模态中我有一个表单，我有日期输入元素的形式。我想使用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'
    });

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

Answer 1

请在这篇文章中查看答案： IE not rendering DatePicker for MVC5

他们正在使用： @ Html.TextBoxFor

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

我的工作代码： - Index.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）]。希望这会有所帮助。

Bootstrap Twitter 3 Modal和Bootstrap 3 Datepicker confilct

1 个答案: