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

Andrus 发表于 Dev

安德鲁斯

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

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

如果浏览器（而不是此代码）支持html5本机输入type ='date'，则如何使用它进行内联日期编辑？

协同模型：

{"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应用程序。

更新

我尝试回答但遇到问题。

有问题的日期模板不包含新格式，因此仍未定义。我将日期解析行替换为
```
$(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中，对于相同的列宽，会出现大的空白空间，并且只有第一个按钮的一部分可见：

铬合金

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

奥列格

我发现您的问题很有趣，并创建了可在没有jQuery UI Datepicker的Google Chrome中运行的演示，并在日期编辑过程中显示了类似

在此处输入图片说明

演示的列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);
        }
    });
};