datetimepicker не отображается в модальном режиме начальной загрузки

Это событие дневного клика, где модальное и генерируется в этом коде. Мое модальное окно отображается в событии dayClick. Я хочу предоставить средство выбора даты и времени, для которого я написал функцию в теге script. Функция вызывается, когда я нажимаю на средство выбора в модальном режиме, но средство выбора даты и времени (календарь появляется после нажатия на средство выбора) не появляется.

Код:

dayClick: function (date, jsEvent, view) {
    //document.getElementById("startdate").value = date.format();
    //document.getElementById("enddate").value = date.format();

    $("#addEvent").dialog({
        modal: true, position: 'top', open: function () {
            // On open, hide the original submit button
            $(this).find("[type=submit]").hide();

            $('#datetimepicker2').datetimepicker({
                format: 'dd/MM/yyyy hh:mm:ss',
                language: 'pt-BR'
            });
        },
        buttons: [
            {
                text: "Add",
                click:
                    function () {

                        var res = addEvent(document.getElementById('title').value, document.getElementById('startdate').value, document.getElementById('enddate').value, document.getElementById('description').value, localStorage.getItem("id"));
                            if ($.trim(res) == 'false') {
                            alert("Event can not be added")
                            $(this).dialog("close");
                        } else {

                            alert("Event Added Successfully")
                            $(this).dialog("close");
                        }
                    },
                type: "submit"
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]

    });

     // change the day's background color just for fun
    $(this).css('background-color', 'lightblue');
}

Вызов средства выбора даты и времени:*

<script>
  $(document).on("click", "#addEvent", function () {
    alert(1)
    $('#datetimepicker2').datetimepicker({
      format: 'dd/MM/yyyy hh:mm:ss',
      language: 'pt-BR'
    });
  });
</script>

Дизайн модального окна:

<div id="addEvent" class="input-append date" title="New Event" style="text-align:left">
    <input type="text" id="datetimepicker2"/>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>

    <label>Title <input type="text" id="title" placeholder="Title" style="margin-left:40px;margin-bottom:4px" /> </label><br />
    <label>Start Date <input type="datetime" id="startdate" placeholder="Start date" style="margin-left:4px;margin-bottom:4px" /> </label><br />
    <label>End Date &nbsp;<input type="datetime" id="enddate" placeholder="End date " style="margin-left:8px;margin-bottom:4px;margin-top:3px" /></label><br />
    <label>Description<textarea id="description" style="height:30px;margin-left:4px;margin-top:4px;text-align:left;align-self:flex-start" placeholder="Enter Description"></textarea> </label>-->
    <div id="eventInfo"></div>
    <p><strong><a id="eventLink" href="" target="_blank"></a></strong></p> 
</div>

fullcalendar modal-dialog bootstrap-datetimepicker
person Ninad Kulkarni    schedule 09.02.2017    source источник
comment
все работает нормально, кроме средства выбора даты и времени, средство выбора даты и времени отлично работает на веб-странице, но не работает на модальном   -  person Ninad Kulkarni    schedule 09.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал атрибуты входного тега type="datetime-local" value="1990-12-31T23:59:60Z" для средства выбора даты и времени.

  <div id="addEvent" title="New Event" style="text-align:left;width:355px;">
                <table style="align-self:stretch">
                    <tr>
                        <td><label>Title</label></td>
                        <td><input type="text" id="title" placeholder="Title" style="margin-bottom:4px" /></td>
                    </tr>
                    <tr>
                        <td><label>Start Date</label></td>
                        <td><input type="datetime-local" value="1990-12-31T23:59:60Z" id="startdate" placeholder="Start date" style="margin-bottom:4px" /></td>
                    </tr>
                    <tr>
                        <td><label>End Date</label></td>
                        <td><input type="datetime-local" value="1990-12-31T23:59:60Z" id="enddate" placeholder="End date " style="margin-bottom:4px;margin-top:3px;" /></td>
                    </tr>
                    <tr>
                        <td><label>Description</label></td>
                        <td><textarea id="description" style="height:30px;margin-top:4px;text-align:left;align-self:flex-start;" placeholder="Enter Description"></textarea></td>
                    </tr>
                    <tr>
                        <td><label>Invite</label></td>
                        <td><input type="text" id="invite" onclick="openInviteWindow()"  style="margin-bottom:4px;margin-top:3px;" /></td>
                    </tr>
                </table>

            </div>
person Ninad Kulkarni    schedule 15.02.2017