datetimepicker does not show in bootstrap modal

Question

This is a day click event where modal and is getting generated in this code. My modal is rendering on dayClick event. I want to provide datetime picker on it for which I have written function in script tag. The function is getting called when I click on the picker in modal but datetimepicker(calendar appears after clicking on picker) does not appear.

Code:

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');
}

Calling datetime picker:*

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

Design of modal:

<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

I used input tag attributes type="datetime-local" value="1990-12-31T23:59:60Z" for datetime picker

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