无法在日期选择器中添加图像

Question

我在 .jqGrid 和 filterToolbar 中使用 .timepicker。我想在过滤器栏旁边添加一个图像，用户应该在其中看到他们单击图像的时间。

如果我只使用 $(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({
             showOn: "button",
            buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
             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();
        }
      }
    },
    {
     label: "Concept Name",
     name: "ConceptName",
     key: true,
     width: 100,
     align: "center"
    }],
    data: [{
      StartRunTime: "12:00",
      ConceptName: "ABC"
    }],

    caption: ".jqGrid Test"
  }).jqGrid('filterToolbar', {
    autoSearch: true
  });
  $(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>');
  
});

.showCalendar {
 margin: 0px 2px;
 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>

无法在日期选择器中添加图像

Unable to add image in datepicker

javascript

jquery

jqgrid

timepicker