日付ピッカーに画像を追加できません

Question

.timepicker.jqGridの中に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>

有効でないオプションのthats

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>