How do I add datepicker in the add row dialog in jqGrid?

前端未结

关注

 4  811

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?

Also how do I check if the input ent

相关标签:

4条回答

陌清茗

2021-02-05 17:00
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:
```
<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:
```
{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.

Hopefully that helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...
一向

2021-02-05 17:05
To get the datepicker in the create/edit popup , you need to add this lines to the updateDialog or to the addDialog:
```
afterShowForm: function (formId) {
    $("#CreationDate").datepicker();
}
```
If you want to format it, you can set format option in datepicker()..like:
```
afterShowForm: function (formId) { $("#CreationDate").datepicker({
           dateFormat: "dd/M/yy"});}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2021-02-05 17:15
You need to add this lines to the updateDialog or to the addDialog:
```
afterShowForm: function (formId) {
            $("#CreationDate").datepicker();
        }
```
Hope this helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...

不思量自难忘°

2021-02-05 17:27

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.

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>

0 讨论(0)