如何在jqGrid中使用输入type ='date'作为日期列 [英] How to use input type='date' for date column in jqGrid
问题描述
它使用jquery ui-date选择器，用于在线编辑的jqGrid日期列定义为colmodel和javascript。
这是很多维护的代码，结果是丑陋的。
如果支持这种方式，如何使用html5 native input type ='date'进行内联日期编辑通过浏览器代替这段代码？
colmodel：
{模板：DateTemplate
，label：发票日期，
name：Invoicedate，
index：Invoicedate，
editoptions {
dataInit：initDateWithButton
，size：10
}，
searchoptions：{dataInit：initDateWithButton
，尺寸：10，attr：{size：10}}，width：50
}
javascript：
var DateTemplate = {
sorttype：'date'，formatter：' date'，
formatoptions：{
srcformat：Ymd
}，
editoptions：{maxlength：10，size：10，dataInit：initDateWithButton}，
可编辑：true，
searchoptions：{
sopt：['eq'，'ne'，'lt'，'le'，'gt'，'ge']，
dataInit：initDateWithButton，
size：11，//高级搜索对话框
attr：{size：11} //搜索工具栏
}
} ;
var initDateWithButton = function（elem）{
if（/^\d+%$/.test(elem.style.width））{
// remove％from搜索工具栏
elem.style.width ='';
}
//可以使用datepicker的'showOn'选项提前搜索对话框
//或在编辑中我们必须使用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 ）.addCl屁股（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，Ymd））;
- 行
str = $ .jgrid.parseDate（Ymd，$ this.val（），cm将其已经转换为iso的有效日期，如$ code code
$ c> 1973-02-15
到长格式，如Thu Feb 15 1973 00:00:00 GMT + 0200（FLE标准时间）
所需结果是1973-02-15，因此不需要转换。
我解决了通过替换行
$ this.val（str）;
与
$ this.val $ this.val（））;
- 日期内联编辑完成后，日期以iso格式显示。本地化日期仅在网格刷新后显示。
**更新**
日期不适合列宽。在IE按钮可见：
但在同一列宽度的Chrome中出现大空白空间，只显示第一个按钮的一部分：
如何解决这个问题，以便按钮可见相同的列宽？
解决方案我发现你的问题有趣，并创建了支持更好的Opera 24和空的输入日期。
更新2： 演示包含小修改（
$。jgrid.parseDate的的设置），它使用免费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.
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.
- 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 likeThu 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());
- 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
invdatedefined 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
initDateEditI defined asvar 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 theformatoptions.newformat. I usedbeforeSaveRowcallback 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
myBeforeSaveRoware 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
thisfor$.jgrid.parseDate) and it uses free jqGrid 4.8.这篇关于如何在jqGrid中使用输入type ='date'作为日期列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
