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

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

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

如果浏览器支持而不是此代码，如何使用 html5 原生输入 type='date' 进行内联日期编辑?

colmodel:

{"template":DateTemplate,"label":"发票日期","name":"发票日期","index":"发票日期",编辑选项":{"dataInit":initDateWithButton尺寸":10},搜索选项":{dataInit":initDateWithButton,"size":10,"attr":{"size":10}},"width":50}

javascript:

var DateTemplate = {排序类型:日期"，格式化程序:日期"，格式选项:{srcformat:Y-m-d"},编辑选项:{最大长度:10，大小:10，dataInit:initDateWithButton}，可真，搜索选项:{sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],数据初始化:initDateWithButton，size: 11,//高级搜索对话框attr: { size: 11 }//用于搜索工具栏}};var initDateWithButton = function (elem) {if (/^d+%$/.test(elem.style.width)) {//从搜索工具栏中删除 %elem.style.width = '';}//能够在提前搜索对话框中使用日期选择器的showOn"选项//或者在编辑中我们必须使用 setTimeout设置超时(函数(){$(elem).css({ "box-sizing": "border-box", width: "5.7em" }).datepicker({//dateFormat: 'dd.mm.yy',showOn: '按钮',更改年份:是的，更改月份:真，节目周刊:是的，显示按钮面板:真，onClose: 函数 (dateText, inst) {inst.input.focus();}}).removeClass("ui-corner-all").addClass("ui-corner-left");$(elem).next('button.ui-datepicker-trigger').button({文字:假的，图标:{主要:'ui-icon-calendar'}}).css({ 宽度:'1em'，高度:'1.09em' }).removeClass("ui-corner-all").addClass("ui-corner-right").find('span.ui-button-text').css({ 填充:'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. 有问题的日期模板不包含新格式，因此仍未定义.我用行替换了日期解析行

   $(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"));

按照评论中的建议.

1. 行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());

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

** 更新**

日期不适合列宽.在 IE 中按钮可见:

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

如何解决这个问题，使相同列宽的按钮可见?

解决方案

我觉得你的问题很有趣并创建了 支持更好的 Opera 24 和空输入日期.

更新 2: 演示 包含小的修改($.jgrid.parseDate 的 this 的设置)，它使用 免费 jqGrid 4.8.

jqGrid date column for inline editing is defined using colmodel and javascript below.

It uses jquery ui-date picker. This is lot of code to maintain and result is ugly.

How to use html5 native input type='date' for inline date editing if this is supported by browser instead of this code ?

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

This is ASP.NET MVC4 application.

Update

I tried answer but got issues.

1. Date template in question does not contain newformat so this is still not defined. I replaced date parsing line with line

   $(elem).val($.jgrid.parseDate($.jgrid.formatter.date.newformat, orgValue, "Y-m-d"));
   

as recommended in comment.

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

convets valid date which is already converted to iso, like 1973-02-15 to long format like Thu Feb 15 1973 00:00:00 GMT+0200 (FLE Standard Time)

Required result is 1973-02-15 so conversion is not needed.

I solved this by replacing line

$this.val(str);

with

$this.val($this.val());

3. After date inline edit is finished, date is shown in column in iso format. Localized date is shown only after grid is refreshed.

** Update **

Date does not fit to column width. In IE button is visible:

but in Chrome for same column width big empty space appears and only part of first button is visible:

How to fix this so that buttons are visible for same column width ?

解决方案

I find your question interesting and created the demo which works in Google Chrome without jQuery UI Datepicker and display during date editing the results like

The demo have column invdate defined as below

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

The callback function initDateEdit I defined as

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

I don't know <input type="date"/> good enough. It uses input format of date as ISO. So I converted in the code above the original text to ISO to display correct date during editing. In the same way one have to convert the results of editing back to the formatoptions.newformat. I used beforeSaveRow callback in the case:

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

where myBeforeSaveRow are defined as the following:

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

UPDATED: One more demo supports better Opera 24 and empty input dates.

UPDATED 2: The demo contains small modification (the setting of this for $.jgrid.parseDate) and it uses free jqGrid 4.8.