Question

内联编辑的jqGrid日期列使用下面的colmodel和javascript定义。

它使用jquery ui-date选择器。这需要维护很多代码，结果很难看。

如果浏览器支持而不是使用此代码，那么如何使用html5 native input type ='date'进行内联日期编辑？

colmodel：

{"template":DateTemplate
,"label":"Invoice date",
"name":"Invoicedate",
"index":"Invoicedate",
"editoptions":{
  "dataInit":initDateWithButton
  ,"size":10
  },

"searchoptions":{"dataInit":initDateWithButton
,"size":10,"attr":{"size":10}},"width":50
}

的javascript：

var DateTemplate = {
    sorttype: 'date', formatter: 'date',
    formatoptions: {
        srcformat: "Y-m-d"
    },

    editoptions: { maxlength: 10, size: 10, dataInit: initDateWithButton },
    editable: true,
    searchoptions: {
        sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
        dataInit: initDateWithButton,
        size: 11,          // for the advanced searching dialog 
        attr: { size: 11 }   // for the searching toolbar 
    }
};

var initDateWithButton = function (elem) {
    if (/^\d+%$/.test(elem.style.width)) {
        // remove % from the searching toolbar 
        elem.style.width = '';
    }
    // to be able to use 'showOn' option of datepicker in advance searching dialog 
    // or in the editing we have to use setTimeout 
    setTimeout(function () {
        $(elem).css({ "box-sizing": "border-box", width: "5.7em" }).datepicker({
            // dateFormat: 'dd.mm.yy',
            showOn: 'button',
            changeYear: true,
            changeMonth: true,
            showWeek: true,
            showButtonPanel: true,
            onClose: function (dateText, inst) {
                inst.input.focus();
            }
        })
            .removeClass("ui-corner-all").addClass("ui-corner-left");

        $(elem).next('button.ui-datepicker-trigger').button({
            text: false,
            icons: { primary: 'ui-icon-calendar' }
        }).css({ width: '1em', height: '1.09em' })
            .removeClass("ui-corner-all").addClass("ui-corner-right")
        .find('span.ui-button-text')
        .css({ padding: '0.1em' })
        .siblings('span.ui-button-icon-primary')
        .css({ marginLeft: "-8.5px", marginTop: "-8.5px" });
        $(elem).next('button.ui-datepicker-trigger').andSelf().css("verticalAlign", "middle");
    }, 100);
};

这是ASP.NET MVC4应用程序。

更新

我试过回答，但遇到了问题。

有问题的日期模板不包含newformat，因此仍未定义。我用行
替换了日期解析行
```
$(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"));
```

根据评论中的建议。

行str = $.jgrid.parseDate("Y-m-d", $this.val(), cm.formatoptions.newformat);

表示已经转换为iso的有效日期，例如1973-02-15 长格式，如Thu Feb 15 1973 00:00:00 GMT+0200 (FLE Standard Time)

必需的结果是1973-02-15，因此不需要转换。

我通过替换行

$this.val(str);

带

$ this.val（$ this.val（））;

日期内联编辑完成后，日期以iso格式显示在列中。只有在刷新网格后才会显示本地化日期。

**更新**

日期不适合列宽。在IE按钮中可见：

iebutton

但在Chrome中，相同的列宽会出现大的空白区域，只有第一个按钮的一部分可见：

chrome

如何解决这个问题，以便按钮在相同的列宽下可见？

Answer 1

我发现您的问题很有趣并创建了the demo，可以在没有jQuery UI Datepicker的Google Chrome中使用，并在日期编辑期间显示结果，如

enter image description here

该演示的列invdate定义如下

{ name: "invdate", width: 120, align: "center", sorttype: "date",
    formatter: "date", formatoptions: { newformat: "m/d/Y"}, editable: true,
    editoptions: { dataInit: initDateEdit } }

我定义为

的回调函数initDateEdit

var initDateEdit = function (elem, options) {
    // we need get the value before changing the type
    var orgValue = $(elem).val(),
        cm = $(this).jqGrid("getColProp", options.name);

    $(elem).attr("type", "date");
    if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
        // if type="date" is not supported call jQuery UI datepicker
        $(elem).datepicker({
            dateFormat: "mm/dd/yy",
            autoSize: true,
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            showWeek: true
        });
    } else {
        // convert date to ISO
        $(elem).val($.jgrid.parseDate.call(this, cm.formatoptions.newformat, orgValue, "Y-m-d"));
    }
};

我不知道<input type="date"/>足够好。它使用日期的输入格式作为ISO。所以我将原始文本上方的代码转换为ISO，以便在编辑期间显示正确的日期。以同样的方式，必须将编辑结果转换回formatoptions.newformat。我在案例中使用了beforeSaveRow回调：

onSelectRow: function (rowid) {
    var $self = $(this),
        savedRow = $self.jqGrid("getGridParam", "savedRow");
    if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
    }
    $self.jqGrid("editRow", rowid, {
        keys: true,
        beforeSaveRow: myBeforeSaveRow
    });
}

其中myBeforeSaveRow定义如下：

var myBeforeSaveRow = function (options, rowid) {
    var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
    $dates.each(function () {
        var $this = $(this),
            id = $this.attr("id"),
            colName = id.substr(rowid.length + 1),
            cm = $self.jqGrid("getColProp", colName),
            str;
        if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
            // convert from iso to newformat
            str = $.jgrid.parseDate.call($this[0], "Y-m-d", $this.val(), cm.formatoptions.newformat);
            $this.attr("type", "text");
            $this.val(str);
        }
    });
};

更新：One more demo支持更好的Opera 24和空输入日期。

更新2： The demo包含少量修改（this的{{1}}设置）并使用free jqGrid 4.8。

如何在jqGrid中使用input type ='date'作为日期列

1 个答案: