日期

日期

关注
发信
关注(28)粉丝(399)

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

本文介绍了如何使用输入类型='日期'在jqGrid的日期列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于内联编辑

jqGrid的日期列使用colmodel及以下的JavaScript来定义。

它使用jQuery UI的-日期选择器。
这是很多code的保持和结果是丑陋的。

如何使用HTML5原生输入类型='日期'内联编辑日期，如果这是由浏览器，而不是这个code支持？

colmodel：

  {模板：DateTemplate
标签：发票日期
名：Invoicedate
指数：Invoicedate
editoptions：{
  dataInit：initDateWithButton
  ，大小：10
  }，searchoptions：{dataInit：initDateWithButton
，大小：10，ATTR：{大小：10}}，宽：50
}

JavaScript的：

  VAR DateTemplate = {
    sorttype：日期，格式：'日期'，
    formatoptions：{
        srcformat：Y-M-D
    }，    editoptions：{最大长度：10，大小：10，dataInit：initDateWithButton}，
    编辑：真的，
    sea​​rchoptions：{
        SOPT：['情商'，'东北'，'下'，'乐'，'GT'，'阁']，
        dataInit：initDateWithButton，
        尺寸：11，//在高级搜索对话框
        ATTR：{大小：11} //用于搜索工具栏
    }
};VAR initDateWithButton =功能（ELEM）{
    如果（/^\\d+%$/.test(elem.style.width））{
        //来自搜索工具栏中删除％
        elem.style.width ='';
    }
    //到能够使用日期选择的'showOn'选项预先搜索对话框
    //或编辑，我们必须使用的setTimeout
    的setTimeout（函数（）{
        $（ELEM）的.css（{盒子大小：边界框，宽：5.7em}）日期选择器（{。
            // DATEFORMAT：DD.MM.YY，
            showOn：按钮，
            changeYear：真实，
            changeMonth：真实，
            showWeek：真实，
            showButtonPanel：真实，
            的OnClose：函数（dateText，研究所）{
                inst.input.focus（）;
            }
        }）
            .removeClass（UI角一切）addClass（UI角遗）。        $（ELEM）。接下来（'button.ui-日期选择器触发'）。按钮（{
            文本：假的，
            图标：{主：UI图标，日历'}
        }）CSS（{宽度：'1EM'，高度：1.09em'}）
            .removeClass（UI角一切）。addClass（UI刀尖权）
        .find（'span.ui按钮文本）
        的.css（{填充：0.1em'}）
        .siblings（'span.ui按钮图标小学）
        的.css（{marginLeft：-8.5px，marginTop：-8.5px}）;
        $（ELEM）的.next（'button.ui-日期选择器触发'）andSelf（）的CSS（verticalAlign，中间）。。
    }，100）;
};

这是ASP.NET应用程序MVC4

更新

我试过的答案，但得到的问题。


  1. 有关日期模板不包含所以这仍然是没有定义newformat。
    我换成日期解析用一行行

      $（ELEM）.VAL（$ jgrid.parseDate（$ jgrid.formatter.date.newformat，orgValue，Y-M-D））;


在注释建议。


  • 行海峡= $ .jgrid.parseDate（Y-M-D，$ this.val（），cm.formatoptions.newformat）;

    • convets这已经转换为ISO，如有效日期1973年2月15日
    像长格式周四1973年2月15日00:00:00 GMT + 0200（FLE标准时间）

    所需的结果是1973年2月15日因此无需转换。

    我解决了这个替换行

      $ this.val（STR）;

    与

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


  • 日联编辑结束后，日期是在ISO格式栏中显示。本地化的日期显示网格是刷新之后。

    • ** **更新

    日期不适合列宽。在IE浏览器按钮是可见的：

    但在Chrome浏览器相同的列宽的大空的空间出现，第一个按钮的一部分是可见的：

    如何解决这个问题，使按钮是同一列的宽度可见？


    解决方案

    我觉得你的问题有趣和创造的谷歌浏览器不jQuery UI的日期选择器和显示日期编辑的结果类似。

    该演示有柱 invdate 定义如下

      {名字：invdate，宽度：120，对齐：中心，sorttype：日期
        格式：日期，formatoptions：{newformat：M / D / Y}，可编辑：真正的，
        editoptions：{dataInit：initDateEdit}}

    回调函数 initDateEdit 我定义为

      VAR initDateEdit =功能（ELEM，期权）{
        //我们需要改变类型之前获得的价值
        VAR orgValue = $（ELEM）.VAL（）
            厘米= $（本）.jqGrid（getColProp，options.name）;    $（ELEM）.attr（类型，日期）;
        如果（（Modernizr的＆安培;＆安培;！Modernizr.inputtypes.date）|| $（ELEM）.prop（类型）==DATE）{
            //如果type =日期不支持调用jQuery UI的日期选择器
            $（ELEM）.datepicker（{
                DATEFORMAT：MM / DD / YY，
                autoSize的：真实，
                changeYear：真实，
                changeMonth：真实，
                showButtonPanel：真实，
                showWeek：真
            }）;
        }其他{
            //转换日期为ISO
            $（ELEM）.VAL（$ jgrid.parseDate.call（在此，cm.formatoptions.newformat，orgValue，Y-M-D））;
        }
    };

    我不知道＆LT;输入类型=日期/＆GT; 不够好。它使用日期作为ISO的输入格式。所以我转换了code以上原文为ISO编辑中显示正确的日期。以同样的方法之一要编辑的结果转换回 formatoptions.newformat 。我用 beforeSaveRow 回调的情况下：

      onSelectRow：功能（ROWID）{
        变量$自我= $（本），
            savedRow = $ self.jqGrid（getGridParam，savedRow）;
        如果（savedRow.length大于0＆放大器;＆放大器; savedRow [0] .ID == ROWID！）{
            $ self.jqGrid（restoreRow，savedRow [0] .ID）;
        }
        $ self.jqGrid（editRow，ROWID，{
            键：真实，
            beforeSaveRow：myBeforeSaveRow
        }）;
    }

    其中， myBeforeSaveRow 的定义如下：

      VAR myBeforeSaveRow =功能（选择，ROWID）{
        变量$自我= $（本），$日期= $（＃+ $ .jgrid.jqID（ROWID））找到（输入[类型=日期]）。
        $ dates.each（函数（）{
            变量$此= $（本），
                ID = $ this.attr（ID），
                COLNAME = id.substr（rowid.length + 1）
                厘米= $ self.jqGrid（getColProp，COLNAME）
                海峡;
            如果（（Modernizr的＆安培;＆安培; Modernizr.inputtypes.date）|| $ this.prop（类型）===DATE）{
                //转换为ISO newformat
                海峡= $ .jgrid.parseDate.call（$此[0]，Y-M-D，$ this.val（），cm.formatoptions.newformat）;
                $ this.attr（类型，文本）;
                $ this.val（STR）;
            }
        }）;
    };

    更新时间：：支持更好的歌剧24和空的输入日期。

    更新3： 。

    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.

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

    convets valid date which is already converted to iso, like 1973-02-15to 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());

    1. 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.

    这篇关于如何使用输入类型='日期'在jqGrid的日期列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

    07-05 12:12
    Powered by LMLPHP ©2024 日期 0.041809