Jquery 如何在jqGrid的“添加行”对话框中添加日期选择器？

大家好，我正在使用jqGrid，我想知道，在“添加行”对话框中，如何将jQueryUI的日期选择器添加到一些输入字段中

另外，如何检查输入的输入是否有效

---

提前谢谢

我自己研究了一会儿之后，根据其他人的各种输入，我将其混合在一起。我假设您已经有了CSS和JS日期选择器文件。如果没有，请告诉我，我会帮你找到他们。在

标记中，将以下置于

行之后：

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

然后，请注意，在

标记中，在

之后插入以下

现在，在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; 
                  } 
                } 
              },

{name:'last_modified_date'，index:'last_modified_date'，宽度：90，可编辑：true，编辑选项：{size:20，
dataInit:函数（el）{
$（el）.datepicker（{dateFormat:'yy-mm-dd'}）；
}, 
defaultValue:函数（）{
var currentTime=新日期（）；
var month=parseInt（currentTime.getMonth（）+1）；
month=month您需要将此行添加到
updateDialog
或
addDialog
：

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

希望这能有所帮助。
我修改了我找到的一些代码片段。我想将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("")
}

Javascript:
...
//在这里，我们全局设置altRows选项
extend（jQuery.jgrid.defaults，{altRows:true}）；
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
$（函数（）{
$（“#列表”）.jqGrid({
数据类型：“jsonstring”，
jsonReader：{
重复项：false，
根：函数（obj）{return obj；}，
第页：函数（obj）{return 1；}，
总计：函数（obj）{return 1；}，
记录：函数（obj）{return obj.length；}
},
colNames:[“日期”、“客户ID”、“客户名称”、“操作”]，
colModel：[
{名称：“日期”，索引：“日期”，宽度：70，对齐：“中心”}，
{name:'custID'，index:'custID'，宽度：70，对齐：“center”}，
{name:'custName'，index:'custName'，宽度：150，对齐：“center”，可排序：false}，
{name:'custID'，index:'custID'，width:50，align:'center'，sortable:false，formatter:editLink}，
],
宽度：“650”，
寻呼机：“#寻呼机”，
rowNum:10，
行列表：[10,20,30]，
viewrecords：是的，
gridview：没错，
自动编码：真
//,
//标题：“jqGrid示例”
}); 
}); 
函数editLink（单元格值、选项、行数据、操作）{
返回“编辑”；
}
函数editcall（日期、客户ID、客户名称）{
$（“#日期选择器”）.val（日期）
$（“#Text1”）.val（客户ID）
$（“#Text2”）.val（客户名称）
}
函数addnewRow（）{
var grid=jQuery（“列表”）；
var myData={“date”：$（“#datepicker”）.val（），“custID”：$（“#Text1”）.val（），“custName”：$（“#Text2”）.val（）；
var recnum=grid.getGridParam（'records'）；
jqGrid（'addRowData'，recnum，myData）；
$（“#日期选择器”）.val（“”）；
$（“#Text1”）.val（“”）；
$（“#Text2”）.val（“”）
}
函数updateRow（）{
var grid=jQuery（“列表”）；
var myData={“date”：$（“#datepicker”）.val（），“custID”：$（“#Text1”）.val（），“custName”：$（“#Text2”）.val（）；
var recnum=grid.jqGrid（'getGridParam'，'selrow'）；
jqGrid（'setRowData'，recnum，myData）；
$（“#日期选择器”）.val（“”）；
$（“#Text1”）.val（“”）；
$（“#Text2”）.val（“”）
}



HTML：
...
提交
更新
要在创建/编辑弹出窗口中获取日期选择器，需要将以下行添加到updateDialog或addDialog：

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

如果要格式化，可以在datepicker（）中设置format选项，如：

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>

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

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