Question

这是一个日期点击事件，其中模态并在此代码中生成。我的模态是在dayClick事件上呈现。我想提供日期时间选择器，我已经在脚本标签中编写了函数。当我点击模态中的选择器时会调用该函数，但是没有出现datetimepicker（点击选择器后出现的日历）。

代码：

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>

Answer 1

我使用输入标记属性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>

datetimepicker不会在bootstrap模式中显示

1 个答案: