如何减少jqGrid日期列宽

Question

我尝试了jqgrid - calendar icon not showing up in inline editing mode的最后一个回答，用按钮显示日期时间列。

我正在使用日期格式dd.mm.yy日期字段宽度太大，数据和按钮之间有很多空白区域。如何减少日期字段宽度或在日期后立即移动按钮？

更新。增加列宽并不能解决问题，只需在右侧添加额外的可用空间：

UPDATE2

我在回答的更新部分尝试了演示http://www.ok-soft-gmbh.com/jqGrid/DatepickerWithShowOnButton1_small.htm，但按钮宽度仍然太大：

Answer 1

您的代码与my old answer的代码之间的实现可能存在一些差异。如果我增加保持我收到日期的列的列宽

其中按钮位于输入字段的后面。将列宽调整为110得到如下结果

（见the demo）。因此，在我看来，应该只设置列的宽度，以便足以（但不是太多）放置日期和图标。

或者，您可以减小日期选择器的输入字段的字体大小：

包括像

这样的代码

$(elem).css("font-size", "55%");

在调用datapicker之前。见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'});