无法在日期选择器中添加图像
问题描述:
我在.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>
答
那不是有效的选择,但你可以插入图像和监听这样
$(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>
这是有道理的,但它增加了一个形象,如果所有列我添加任何。这里是链接,[jsfiddle](https://jsfiddle.net/gunjan_prmr/kkxa62wb/)。从给定的例子,我怎么才能将它添加到'StartRunTime'列? – CSharper
调用'.parent()。after()'更新了答案。 – ewwink
这个工程。谢谢。 – CSharper