如何在jqGrid的添加行对话框中添加datepicker？

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的datepicker添加到某些输入字段?

Also how do I check if the input entered are valid?

另外,我如何检查输入的输入是否有效?

Thanks in advance!

提前致谢!

4 个解决方案

#1

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 after your <link rel="stylesheet"... href="css/ui.jqgrid.css" /> line:

在我自己研究了这个之后,这是我根据其他人的各种意见捣碎在一起的东西。我假设您已经拥有CSS和JS datepicker文件。如果没有,请告诉我,我会为你追踪它们。在标记内,将以下内容放在行之后:

<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 after your <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。维基有该工具的文档,博客也有论坛,每天都会提出问题。事实上,我认为插件的作者Tony甚至在他的示例页面上有一个UI datepicker示例。

Hopefully that helps.

希望这会有所帮助。

#2

You need to add this lines to the updateDialog or to the addDialog:

您需要将此行添加到updateDialog或addDialog:

afterShowForm: function (formId) {
            $("#CreationDate").datepicker();
        }

Hope this helps.

希望这可以帮助。

#3

To get the datepicker in the create/edit popup , you need to add this lines to the updateDialog or to the addDialog:

要在创建/编辑弹出窗口中获取日期选取器,您需要将此行添加到updateDialog或addDialog:

afterShowForm: function (formId) {
    $("#CreationDate").datepicker();
}

If you want to format it, you can set format option in datepicker()..like:

如果要格式化它,可以在datepicker()中设置格式选项..如:

afterShowForm: function (formId) { $("#CreationDate").datepicker({
           dateFormat: "dd/M/yy"});}

#4

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与本地数据,以及将datepicker作为我的添加行按钮的一部分,这是有效的。

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">&nbsp;&nbsp;
        <input id="Text1" type="text" size="15"/>&nbsp;&nbsp;
        <input id="Text2" type="text" size="20"/>&nbsp;&nbsp;
        <button onclick="addnewRow()">Submit</button>&nbsp;&nbsp;
        <button onclick="updateRow()">Update</button>&nbsp;&nbsp;
        <input id="Button1" type="button" value="Add Row" onclick="return addnewRow();" />

        <table id="list">
            <tr>
                <td></td>
            </tr>
        </table>
        <div id="pager"></div>
    </div>

#1

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />