datepicker 在 jqgrid 中加载时自动弹出

Question

伙计们，我知道这是一个愚蠢的问题，但我花了 2 天时间寻找解决方案，但从未达到，所以请帮助我......我正在使用 jqgrid .. 并且需要一个名为“从日期”的列一直在编辑模式..但是日期选择器会自动弹出，我希望它在单击字段时弹出..这是我的代码

 <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
            	});
            
        });

这里是截图

enter image description here

任何帮助将不胜感激

Answer 1

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

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

或将其添加到日期选择器

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