datetimepickerがブートストラップモーダルに表示されない

Question

これは、このコードでモーダルが生成されている1日のクリックイベントです。私のモーダルはdayClickイベントでレンダリングされます。スクリプトタグに関数を記述した日時ピッカーを提供したい。モーダルでpickerをクリックすると関数が呼び出されますが、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

私はinputタグを使用するには、タイプ=「日時・ローカル」 値=属性「：59：1990-12-31T23を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>