Конфликт Bootstrap Twitter 3 Modal и Bootstrap 3 Datepicker

у меня модальный, в модальном у меня есть форма, в форме у меня есть элемент ввода даты. Я хочу использовать 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>

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.


jquery twitter-bootstrap bootstrap-datepicker
person Alessandro Staffolani    schedule 22.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Просмотрите ответы в этом сообщении: IE не отображает DatePicker для MVC5

Они используют: @Html.TextBoxFor

Согласно моим исследованиям, тип ввода не имеет полной поддержки HTML5 в браузере IE.

Мой рабочий код: - 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>

Для меня я не могу выбрать дату в средстве выбора даты, но для большинства людей это работает. Все отлично работает со встроенным средством выбора даты, использующим эту аннотацию в модели [DataType(DataType.Date)] в Chrome и Mozilla. Надеюсь это поможет.

person anu    schedule 09.11.2015