Jquery日期选择器图标位置不正确

Jquery datepicker icon position is incorrect

本文关键字：位置 不正确 图标 选择器 日期 Jquery      更新时间：2023-09-26

我的日历图像位于日期选择器的文本框下方。我该如何解决这种错位问题。

这是我的屏幕截图：！1：https://i.stack.imgur.com/3uifN.jpg

请参阅此处的jsfiddle.nitterry/yNw3C/8477

这是我的jsp代码：

     <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Country Visibility</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    var mydata = [
        { Sel: true, Country : "Germany", Capital : "Berlin", Date: "05-09-2014"},
        { Sel: true, Country : "France", Capital : "Paris", Date: "05-09-2014" },
        { Sel: true, Country : "Cameroon", Capital : "Yaounde", Date: "06-09-2014" },
        { Sel: true, Country : "Gabon", Capital : "Libreville", Date: "06-09-2014" },
        { Sel: true, Country : "Holland", Capital : "Amsterdam", Date: "07-09-2014" },
        { Sel: true, Country : "Japan", Capital : "Tokyo", Date: "08-09-2014" },
        { Sel: true, Country : "Italy", Capital : "Rome" , Date: "09-09-2014"},
        { Sel: true, Country : "Spain", Capital : "Madrid" , Date: "09-09-2014"},
        { Sel: true, Country : "England", Capital : "London" , Date: "10-09-2014"},
        { Sel: true, Country : "US", Capital : "Washington D.C." , Date: "12-09-2014"}
    ];
    var grid = jQuery("#pays_grid");
    var initDateWithButton = function (elem) {
        if (/^'d+%$/.test(elem.style.width)) {
            // remove % from the searching toolbar
            elem.style.width = '';
        }
        // to be able to use 'showOn' option of datepicker in advance searching dialog
        // or in the editing we have to use setTimeout
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,     
                buttonImageOnly: true,
                buttonImage: "images/calendar.gif",
                buttonText: "Select date",            
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                         grid[0].triggerToolbar();
                    }
                    else {
                        // to refresh the filter
                        $(inst).trigger("change");
                    }
                }
            });
        $(".ui-datepicker-trigger").css({
            position: "relative",
            marginLeft: "1px",
            marginTop: "0px",
            });
        }, 100);
    };
    grid.jqGrid({ //set your grid id
    data: mydata, //insert data from the data object we created above
    datatype: 'local',
    height: 230,
    autoheight: true,
    width: 800,
    rowNum: 10,
    rowList: [1, 5, 10],
    colNames:['Sel.','Id','Name', 'Date'], //define column names
    colModel:[
       {name: 'Sel', align: 'center', sortable: false, width: 25, search: false, editable: true, edittype: 'checkbox', 
              editoptions: { value: "True:False" }, formatter: "checkbox", formatoptions: { disabled: false} },
       {name:'Country', index:'Country', key: true, width:50, align:'center'},
       {name:'Capital', index:'Capital', width:100, align:'center'},
       {name: 'Date', index: 'Date', align: 'center', width: 100}
    ], //define column models
    pager: '#pager', //set your pager div id
    sortname: 'Country', //the column according to which data is to be sorted; optional
    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
    sortorder: "asc", //sort order; optional
    sortname: 'Country',
    shrinkToFit: true,
    forceFit: true,
    caption: "Country Overview", //title of grid
    loadComplete: function() { 
        grid.jqGrid('setColProp', 'Date', {
            sorttype: 'date', editable: true,
                editoptions: { dataInit: initDateWithButton, size: 11 },
                searchoptions: {
                    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                    dataInit: initDateWithButton,
                  //  size: 8,          // for the advanced searching dialog
                   // attr: {size: 8}   // for the searching toolbar
                }
        });   
        grid.jqGrid('filterToolbar', {autoSearch: true});
    }
    }).navGrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true});

});

</script>
</head>
<body>
<table id="pays_grid"></table>
<div id="pager"></div>
</body>
</html>

我在Stack Overflow上尝试过类似的问题，但我无法使触发器图像与输入一起显示。

在我看来，你应该使用

.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
    vertical-align: middle;
    display: inline-block;
}

请参阅http://jsfiddle.net/yNw3C/8486/

将显示内联样式添加到包含日期的文本框中然后调整日期选择器图像的页边空白顶部，使其看起来美观并与文本框对齐。

请在此处查看：http://jsfiddle.net/saxenaabhi6/yNw3C/8479/

#gs_Date{
display:inline
}

不设置

 position='relative'

设置

position='absolute'

并相应地调整顶部和左侧。这是一把小提琴：

http://jsfiddle.net/ey170t1z/1/

在CSS中：

.ui-datepicker-trigger {
 vertical-align: top;
 height: 24px; /* the same of textbox */
}
相关文章：