無法在日期選擇器中添加圖像

Question

我在.jqGrid中使用.timepicker與filterToolbar。我想添加一個圖像旁邊的過濾器欄，用戶應該看到他們點擊圖像時的時間。

如果我只是使用$(element).timepicker();然後我看到我點擊過濾器欄的時間，但當我跟着時，timepicker根本不工作。

$(element).timepicker({ 
       showOn: "button", 
       buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
       buttonImageOnly: true, 
      }); 

相同的選項與datepicker一起使用。我在這裏錯過了什麼？這是由於jquery.timepicker.js版本？

工作演示

$(function() { 
 
    "use strict"; 
 

 
    $("#grid").jqGrid({ 
 
    colModel: [{ 
 
     name: "StartRunTime", 
 
     label: "Start Run Time", 
 
     align: "center", 
 
     sorttype: "time", 
 
     formatter: "time", 
 
     searchoptions: { 
 
     dataInit: function(element) { 
 
      $(element).timepicker(); 
 
     } 
 
     } 
 
    }], 
 
    data: [{ 
 
     StartRunTime: "12:00" 
 
    }], 
 
    
 
    caption: ".jqGrid Test" 
 
    }).jqGrid('filterToolbar', { 
 
    autoSearch: true 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" /> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css"> 
 

 
<table id="grid"></table>

不工作演示

$(function() { 
 
    "use strict"; 
 

 
    $("#grid").jqGrid({ 
 
    colModel: [{ 
 
     name: "StartRunTime", 
 
     label: "Start Run Time", 
 
     align: "center", 
 
     sorttype: "time", 
 
     formatter: "time", 
 
     searchoptions: { 
 
     dataInit: function(element) { 
 
      $(element).timepicker({ 
 
      \t \t showOn: "button", 
 
      \t \t buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif", 
 
      \t buttonImageOnly: true, 
 
      }); 
 
     } 
 
     } 
 
    }], 
 
    data: [{ 
 
     StartRunTime: "12:00" 
 
    }], 
 
    
 
    caption: ".jqGrid Test" 
 
    }).jqGrid('filterToolbar', { 
 
    autoSearch: true 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" /> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css"> 
 

 
<table id="grid"></table>

Answer 1

那不是有效的選擇，但你可以插入圖像和監聽這樣

$(document).on("click", ".showCalendar", function(){ 
    $("#gs_grid_StartRunTime").timepicker('show'); 
}); 
$('#gs_grid_StartRunTime').parent() 
    .after('<td><img class="showCalendar" src="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"></td>'); 

演示：

$(function() { 
 
    "use strict"; 
 

 
    $("#grid").jqGrid({ 
 
    colModel: [{ 
 
     name: "StartRunTime", 
 
     label: "Start Run Time", 
 
     align: "center", 
 
     sorttype: "time", 
 
     formatter: "time", 
 
     searchoptions: { 
 
     dataInit: function(element) { 
 
      $(element).timepicker(); 
 
     } 
 
     } 
 
    }, 
 
    { 
 
\t \t \t \t \t label: "Concept Name", 
 
\t \t \t \t \t name: "ConceptName", 
 
\t \t \t \t \t key: true, 
 
\t \t \t \t \t width: 100, 
 
\t \t \t \t \t align: "center" 
 
\t \t \t \t }], 
 
    data: [{ 
 
     StartRunTime: "12:00", 
 
     ConceptName: "ABC" 
 
    }], 
 

 
    caption: ".jqGrid Test" 
 
    }).jqGrid('filterToolbar', { 
 
    autoSearch: true 
 
    }); 
 
    $(document).on("click", ".showCalendar", function(){ 
 
    \t $("#gs_grid_StartRunTime").timepicker('show'); 
 
    }); 
 
    $('#gs_grid_StartRunTime').parent().after('<td><img class="showCalendar" src="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"></td>'); 
 
    
 
});

.showCalendar { 
 
\t margin: 0px 2px; 
 
\t cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/css/ui.jqgrid.min.css" rel="stylesheet" /> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css"> 
 

 
<table id="grid"></table>