我尝试了
jqgrid – calendar icon not showing up in inline editing mode的最后一个答案,用按钮显示日期时间列.
我正在使用日期格式dd.mm.yy日期字段宽度太大,数据和按钮之间有很多空白空间.如何减少日期字段宽度或在日期后立即移动按钮？
更新.增加列宽并不能解决问题,只需向右边添加额外的可用空间：
UPDATE2
我从答案的更新部分尝试了演示http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small.htm,但按钮宽度仍然太大：
解决方法
您的代码和
my old answer之间的代码之间的实现可能存在一些差异.如果我增加了保留日期的列的列宽
按钮直接位于输入字段之后.将列宽调整为110得到如下结果
(见the demo).因此,在我看来,应该只设置列的宽度,以便足以(但不是太多)放置日期和图标.
或者,您可以减小datepicker的输入字段的字体大小：
通过包含类似的代码
$(elem).css("font-size","55%");
在调用数据贴纸之前.请参阅one more demo.您还可以考虑减小所使用按钮的大小.
更新：可以额外减小日期选择器的按钮大小,如the demo所示：
在演示中,我使用了以下对datepicker的调用：
$(elem).datepicker({
dateFormat: 'dd.mm.yy',showOn: 'button',changeYear: true,changeMonth: true,showWeek: true,showButtonPanel: true,onClose: function (dateText,inst) {
inst.input.focus();
}
});
$(elem).next('button.ui-datepicker-trigger').button({
text: false,icons: {primary: 'ui-icon-calculator'}
}).css({fontSize: '0.9em',width: '1.7em'})
.find('span.ui-button-text')
.css({padding: '0.1em'});
