在jqgrid中加载时,datepicker会自动弹出

时间:2016-05-04 09:10:51

标签: javascript jquery jqgrid datepicker

伙计我知道这是一个虚拟问题,但我花了2天时间寻找解决方案,但从未达到过,所以PLZ帮助我...我正在使用jqgrid ..和一个名为"来自Date"需要一直在editmode ..但是datepicker会自动弹出,我希望它在点击字段时弹出..这是我的代码



 <script type="text/ecmascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="resources/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="resources/jquery.jqGrid.js"></script>
    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
    <script type="text/ecmascript" src="resources/bootstrap-datepicker.js"></script> 
    
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" media="screen" href="resources/ui.jqgrid-bootstrap.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="resources/bootstrap-datepicker.css" />
	

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
     $(document).ready(function () {
            $("#jqGrid").jqGrid({
                data: data.rows,
                //url: "data.json",
                datatype: "local",
                styleUI : "Bootstrap",
                colModel: [
                           { label: 'Order ID', name: 'OrderID', key: true, width: 75, hidden:true },                   
                           { label: 'From Date', name: 'FromDate', width: 150,id: "datepicker",
                        	   editable: true,
                               edittype:"text",
                               editoptions: {
                                   dataInit: function (element) {
                                      $(element).datepicker({       	  
        									format: 'yyyy-mm-dd',
                                      });
                                   },
                                   
                               },
                           },
                           
                            { label: 'Customer ID', name: 'CustomerID', width: 150},
                           { label: 'Ship Name', name: 'ShipName', width: 200},
                           {
                        	   label :'Row Data',
                               name: 'RowData',
                               align : 'center',
                               formatter: function () {
                                   return "<img src='resources/icon.jpg' onclick='OpenDialog(this)' alt='Data Row' />";
                                   width = 15;
                               }
                           },
                       ],
				onSelectRow: editRow, 
				viewrecords: true,
				editurl : "JqGridServlet",
                width: 780,
                height: 200,
                rowNum: 20,
				rowList : [20,30,50],
                rownumbers: true, 
                rownumWidth: 25, 
                multiselect: true,
                pager: "#jqGridPager",
                	loadComplete: function () {
                	    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i;
                	    for (i = 0; i < ids.length; i++) {
                	        $this.jqGrid('editRow', ids[i]);
                	    }
                	   
                	}
            });
            $('#jqGrid').navGrid("#jqGridPager", {
            	edit: false, 
            	add: true, 
            	del: false, 
            	refresh: true, 
            	view: false
            	});
            
        });
&#13;
&#13;
&#13;

这是一个截屏

enter image description here

anyhelp将受到高度赞赏

1 个答案:

答案 0 :(得分:0)

我想这是日期选择器的错误。解决方法是将其添加到您的CSS中。

#ui-datepicker-div { display: none; }

或者将此添加到datepicker

 $(element).datepicker({    
 autoOpen: false,         
 format: 'yyyy-mm-dd',
});