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

bak*_*rjr 13 jquery jquery-ui jqgrid

嗨,我正在使用jqGrid,我想知道,在添加行对话框中,如何将jQueryUI的datepicker添加到某些输入字段?

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

提前致谢!

小智 17

在我自己研究了这个之后,这是我根据其他人的各种意见捣碎在一起的东西.我假设您已经拥有CSS和JS datepicker文件.如果没有,请告诉我,我会为您追踪它们.在<head>标记内,您的<link rel="stylesheet"... href="css/ui.jqgrid.css" />行后面放置以下内容:

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
Run Code Online (Sandbox Code Playgroud)

然后,仍然在<head>标签内注意你,你的后面插入以下内容<script src="js/jquery-ui-1.7.2.custom.min.js" ...></script>

<script type="text/javascript" src="js/ui.datepicker.js"></script>
Run Code Online (Sandbox Code Playgroud)

现在,在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; 
                  } 
                } 
              },
Run Code Online (Sandbox Code Playgroud)

此外,我相信你已经检查了这一点,但一定要访问jqGrid wiki.维基有该工具的文档,博客也有论坛,每天都会提出问题.事实上,我认为插件的作者Tony甚至在他的示例页面上有一个UI datepicker示例.

希望这会有所帮助.