datetimepicker wird im Bootstrap-Modal nicht angezeigt

Question

Dies ist ein Tagesklickereignis, bei dem modal und in diesem Code generiert wird. Mein Modal wird am TagClick-Ereignis gerendert. Ich möchte datetime picker dafür zur Verfügung stellen, für den ich Funktion in script-Tag geschrieben habe. Die Funktion wird aufgerufen, wenn ich in modal auf den Picker klicke, aber datetimepicker (Kalender erscheint nach Klick auf Picker) wird nicht angezeigt.

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

aufrufen Datetime Picker: *

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

Entwurf 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 verwendet Input-Tag type = "datetime-local" value = "1990-12-31T23: 59: 60Z" Attribute für 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>