Javascript 如何使用输入类型='；日期'；用于jqGrid中的日期列

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

它使用jQueryUI日期选择器。 这需要维护大量代码，结果很糟糕

如果浏览器支持内嵌日期编辑而不是此代码，如何使用html5原生输入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

长格式，如1973年2月15日星期四00:00:00 GMT+0200（FLE标准时间）

要求的结果为1973-02-15，因此不需要转换

我通过更换线路解决了这个问题

$this.val(str);

与

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

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

**更新**

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

但在相同列宽的Chrome中，会出现较大的空白，并且第一个按钮的一部分可见：

---

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

我发现您的问题很有趣，并创建了一个在Google Chrome中运行的、没有jQuery UI Datepicker的、在日期编辑过程中显示的结果，如

演示有如下定义的

invdate

列

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

回调函数

initDateEdit

I定义为

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"));
    }
};

我不知道

是否足够好。它使用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);
        }
    });
};

已更新：支持更好的Opera 24和空输入日期

---

更新2:包含一些小的修改（为

$.jgrid.parseDate

设置

此

）并使用。

我尝试了它，但由于选项参数未定义而出错。我更新了这个问题。@Andrus:jqGrid 4.4.5比1.5岁的时候更老了。

dataInit

的第二个

options

参数于一年前添加到4.5.4中。因此，您应该更新您使用的jqGrid，或者使用类似于

dataInit:function（elem）{return initDateWithButtonHTML5.call（this，elem，{name:{columnName}）；}

的东西，而不是

dataInit:initDateWithButtonHTML5

。或者，您可以使用固定日期格式，而不是使用

cm.formatoptions.newformat

。在这种情况下，您不需要

cm

和

选项。name

。如相关代码所示，源日期值采用输入type='date'接受的ISO格式。输入元素从浏览器中显示的日期起自动执行与iso格式的转换。我们是否应该从此代码中删除format conversion和myBeforeSaveRow？@Andrus：如果您阅读我回答中的

initDateEdit

代码，您将看到第二个

选项

参数将用于获取

cm.formatoptions.newformat

（请参阅

$.jgrid.parseDate

的第一个参数）。因此，如果您知道

newformat

，则可以直接在

formatoptions

或

$.jgrid.formatter.date.newformat

中的

newformat

属性的值中使用它。在这种情况下，您应该另外删除

initDateWithButtonHTML5的第二个
options
参数和
cm=$（this.jqGrid（“getColProp”，options.name）
。在4.8行
$（elem）.val（$.jgrid.parseDate（$.jgrid.formatter.date.newformat，orgValue，“Y-m-d”））
导致异常
无法读取未定义的属性“replace”
看起来
$.jgrid.formatter.date.newformat
未定义