jQuery 如何在 jqGrid 的添加行对话框中添加日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2152763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add datepicker in the add row dialog in jqGrid?
提问by bakerjr
Hi I'm using jqGrid and I'm wondering, how do I add jQueryUI's datepicker to some of the input fields when in the add row dialog?
嗨，我正在使用 jqGrid，我想知道如何在添加行对话框中将 jQueryUI 的日期选择器添加到某些输入字段？
Also how do I check if the input entered are valid?
另外我如何检查输入的输入是否有效？
Thanks in advance!
提前致谢！
回答by Mr Yle
After researching this myself a while back, this is what I mashed together based off various input from others. I'm making the assumption that you already have the CSS and JS datepicker files. If not, let me know and I'll track them down for you. Within the <head>tags, place the following afteryour <link rel="stylesheet"... href="css/ui.jqgrid.css" />line:
在我自己研究了一段时间之后，这是我根据其他人的各种意见混合在一起的。我假设您已经拥有 CSS 和 JS 日期选择器文件。如果没有，请告诉我，我会为您找到它们。该范围内<head>的标签，放置以下后您的<link rel="stylesheet"... href="css/ui.jqgrid.css" />线路：
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
Then, still within the <head>tags mind you, insert the the following afteryour <script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>
然后，仍然在该<head>标签提个醒，插入以下后您的<script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script>
Now, within the colmodel array, you are going to add your datepicker JS code to the field of which the datepicker will be used. In my case, I had a 'Last Modified Date' field. So within the colmodel array, your code should look something like this:
现在，在 colmodel 数组中，您要将 datepicker JS 代码添加到将使用 datepicker 的字段中。就我而言，我有一个“上次修改日期”字段。因此，在 colmodel 数组中，您的代码应如下所示：
{name:'last_modified_date', index:'last_modified_date', width:90, editable:true, editoptions:{size:20,
dataInit:function(el){
$(el).datepicker({dateFormat:'yy-mm-dd'});
},
defaultValue: function(){
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0"+month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0"+day : day;
var year = currentTime.getFullYear();
return year+"-"+month + "-"+day;
}
}
},
Also, I'm sure you have already checked this out but be sure to visit the jqGrid wiki. The wiki has documentation for the tool and the blog also has forums where questions are asked daily. In fact, I think Tony, the author of the plugin, even has a UI datepicker example on his example page.
另外，我确定您已经检查了这一点，但请务必访问jqGrid wiki。wiki 有该工具的文档，博客也有论坛，每天都会提出问题。事实上，我认为插件的作者 Tony 在他的示例页面上甚至有一个 UI 日期选择器示例。
Hopefully that helps.
希望这有帮助。
回答by ps ps
You need to add this lines to the updateDialogor to the addDialog:
您需要将此行添加到updateDialog或 到addDialog：
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
Hope this helps.
希望这可以帮助。
回答by S.Akruwala
To get the datepicker in the create/edit popup , you need to add this lines to the updateDialog or to the addDialog:
要在 create/edit popup 中获取日期选择器，您需要将此行添加到 updateDialog 或 addDialog 中：
afterShowForm: function (formId) {
$("#CreationDate").datepicker();
}
If you want to format it, you can set format option in datepicker()..like:
如果你想格式化它，你可以在 datepicker()..like 中设置格式选项：
afterShowForm: function (formId) { $("#CreationDate").datepicker({
dateFormat: "dd/M/yy"});}
回答by James Drinkard
I modified some code snippets that I found. I wanted to use using JSON with local data, along with putting the datepicker as part of my add row button and this worked.
我修改了我发现的一些代码片段。我想将 JSON 与本地数据一起使用，并将日期选择器作为添加行按钮的一部分，这很有效。
Javascript:
...
<script type="text/javascript">
// Here we set the altRows option globally
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
datatype: "jsonstring",
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
colNames: ['Date', 'Customer ID', 'Customer Name', 'Action'],
colModel: [
{ name: 'date' , index: 'date', width: 70, align: "center" },
{ name: 'custID' , index: 'custID', width: 70, align: "center" },
{ name: 'custName', index: 'custName', width: 150, align: "center", sortable: false },
{ name: 'custID', index: 'custID', width: 50, align: "center", sortable: false, formatter: editLink },
],
width: "650",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
autoencode: true
//,
//caption: "jqGrid Example"
});
});
</script>
<script type="text/javascript">
function editLink(cellValue, options, rowdata, action) {
return '<button onclick=editcall("' + rowdata.date + '","' + rowdata.custID + '","' + rowdata.custName + '")>edit</button>';
}
function editcall(date, custID, custName) {
$("#datepicker").val(date)
$("#Text1").val(custID)
$("#Text2").val(custName)
}
function addnewRow() {
var grid = jQuery("#list");
var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
var recnum = grid.getGridParam('records');
grid.jqGrid('addRowData', recnum, myData);
$("#datepicker").val("");
$("#Text1").val("");
$("#Text2").val("")
}
function updateRow() {
var grid = jQuery("#list");
var myData = { "date": $("#datepicker").val(), "custID": $("#Text1").val(), "custName": $("#Text2").val() };
var recnum = grid.jqGrid('getGridParam', 'selrow');
grid.jqGrid('setRowData', recnum, myData);
$("#datepicker").val("");
$("#Text1").val("");
$("#Text2").val("")
}
HTML:
...
<div>
<input type="text" id="datepicker" size="15">
<input id="Text1" type="text" size="15"/>
<input id="Text2" type="text" size="20"/>
<button onclick="addnewRow()">Submit</button>
<button onclick="updateRow()">Update</button>
<input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" />
<table id="list">
<tr>
<td></td>
</tr>
</table>
<div id="pager"></div>
</div>
