2017-02-09 177 views
0

这是一天的单击事件,其中模态和在此代码中生成。我的模式在dayClick事件中呈现。我想为它提供日期时间选择器,为此我在脚本标记中编写了函数。当我点击模式中的选择器时,该函数被调用,但datetimepicker(点击选择器后出现日历)没有出现。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> 
+0

一切工作,除了日期时间选择器,的DateTimePicker工作正常罚款在网页上,但它不适用于模式 –

回答

0

我使用的输入标签的属性类型=“日期时间 - 本地” 值=“1990-12-31T23:60Z:59”的日期时间选择器

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