javascript - 如何在 jqGrid 中的日期列中使用输入类型 ='date'

Question

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

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

如果浏览器支持而不是此代码，如何使用 html5 native 输入 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 应用程序。

更新

我尝试回答但遇到问题。

1. 相关日期模板不包含新格式，因此仍未定义。 我用 line 替换了日期解析行

   $(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 中按钮可见:

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

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

Answer 1

我发现你的问题很有趣并创建了the demo它可以在没有 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);
        }
    });
};

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

更新2: The demo包含小的修改( this 的 $.jgrid.parseDate 的设置)并且它使用 free jqGrid 4.8 .