Bootstrap Twitter 3 Modal and Bootstrap 3 Datepicker confilct

Question

i have a modal, in modal i have a form, in the form i have date input element. I want to use Bootstrap 3 Datepicker, but i don't work.

<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>

then my script

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

The think most strange is that, when i click on input, i get today date, but i can't see the datepicker.

Answer 1

Please view the answers in this post: IE not rendering DatePicker for MVC5

They are using: @Html.TextBoxFor

As per my research, the input type doesnt have full support of HTML5 in IE browser.

My working code:- 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>

And then the Create page has.

<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>

For me I am unable to choose any date on the datepicker but for most of the people it seem to work. Everything works fine with the inbuilt date picker using this annotation in Model [DataType(DataType.Date)] in Chrome and Mozilla. Hope this helps.