Fatal编程技术网
  • jquery/
  • jquery日期选择器月/年混乱

jquery日期选择器月/年混乱

jquery html jquery-ui jsp

jquery日期选择器月/年混乱,jquery,html,jquery-ui,jsp,datepicker,Jquery,Html,Jquery Ui,Jsp,Datepicker,我使用的是jquery datepicker，但是当日历弹出窗口显示时，日历标题栏最右边的月份和年份文本乱七八糟 我玩了一点css，但坦率地说，我没有太多时间玩它 任何帮助都将不胜感激 我会发布问题的图片，但sof不允许我发布，直到我获得10点声誉（？）分 HTML： <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>

我使用的是jquery datepicker，但是当日历弹出窗口显示时，日历标题栏最右边的月份和年份文本乱七八糟

我玩了一点css，但坦率地说，我没有太多时间玩它

任何帮助都将不胜感激

我会发布问题的图片，但sof不允许我发布，直到我获得10点声誉（？）分

HTML：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>ADC Visitor Log</title>
        <link href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet">
        <!--link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /-->
        <style type="text/css">
            textarea{
                font: bold;
            }
        @media print {
            @page         { zoom: 93% }
        }
        div.footer { position: relative; }
        div > span { position: absolute; right: 0; bottom: 0; }
        .ui-datepicker {  
            width: 216px;  
            height: auto;  
            margin: 5px auto 0;  
            text-align: left;
            font: 9pt Arial, sans-serif;  
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  
            -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  
        }
        .ui-datepicker-title {  
text-align: center;  
}
   </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
    <!--script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script-->
    <script>
        $(function() {
            $( "#datepicker" ).datepicker();
        });

        function formSubmit(val){
            var dp = document.getElementById("datepicker").value;
            var fp = document.getElementById("floor").value;
            var op = document.getElementById("officer").value;
            if(!dp.length==0){
                if(!fp.length==0){
                    if(!op.length==0){
                        //alert("still made it thru");
                        document.getElementById("frm1").action = "VL2";
                        document.getElementById("frm1").method = "POST";
                        document.getElementById("frm1").submit();

                    }
                }
            }
        }
    </script>
</head>
<body>
    <h1 align="center">VISITOR LOG</h1>
    <br>
    <br>
    <div align="center">
        <h3>Please set visitor log data:</h3>
        <br>
        <br>
        <form id="frm1" action="VL2" method="POST">
            <div style="background-color: gray">
                <table>
                    <tr style="width: 100%">
                        <td width="33%" align="center">
                            <label>Floor: &nbsp;&nbsp;
                                <select style="vertical-align: center;" name="floor" id="floor">
                                    <option>Select Floor</option>
                                    <option value="2nd">2nd</option>
                                    <option value="4th">4th</option>
                                    <option value="6th">6th</option>
                                </select>
                                </div>
                        </td>
                        <td><input type="hidden" name="type" value="initial" size="0" /></td>
                        <td width="33%" align="center">
                            Date: &nbsp;&nbsp;<input type="text" 
                                                     name="datepicker" id="datepicker" 
                                                     style="background-color: #f5ffff; border: none;"/>
                        </td>
                        <td width="33%" align="center">
                            <label>Officer: &nbsp;&nbsp;
                                <input name="officer" id="officer" size="40"
                                       style="background-color: #f5ffff; border: none;"/>
                        </td>
                    </tr>
                </table>
            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div style="width: 100%; height: 30%; vertical-align: middle">
                <input align="center" type="button" onclick="formSubmit()" value="Submit">
            </div>
        </form>
    </div>

</body>


ADC访客日志
文本区{
字体：粗体；
}
@媒体印刷品{
@页面{缩放：93%}
}
div.footer{position:relative；}
div>span{位置：绝对；右侧：0；底部：0；}
.ui日期选择器{
宽度：216px；
高度：自动；
保证金：5px自动0；
文本对齐：左对齐；
字体：9pt Arial，无衬线；
-webkit盒阴影：0px 0px 10px 0px rgba（0,0,0,5）；
-moz盒阴影：0px 0px 10px 0px rgba（0,0,0,5）；
盒影：0px 0px 10px 0px rgba（0,0,0,5）；
}
.ui日期选择器标题{
文本对齐：居中；
}
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
功能表单提交（val）{
var dp=document.getElementById（“日期选择器”）.value；
var fp=document.getElementById（“floor”）.value；
var op=document.getElementById（“高级职员”）.value；
如果（！dp.length==0）{
如果（！fp.length==0）{
如果（！op.length==0）{
//警惕（“仍然成功”）；
document.getElementById（“frm1”）.action=“VL2”；
document.getElementById（“frm1”）.method=“POST”；
document.getElementById（“frm1”）.submit（）；
}
}
}
}
访客日志




请设置访客日志数据：




楼层：
选择楼层
第二
第四
第六
日期：
官员：
正是这一行CSS导致了您的问题：

    div > span { position: absolute; right: 0; bottom: 0; }
删除此选项，日历将再次正确显示

您的选择器当前过于通用（因此它会拾取div的直接子级的每个跨距），应该重新编写，以便更具体地满足您的预期用途

请参见此处删除的那一行CSS：

看起来你在用那条线把灰色条中的所有东西都对齐到底部，对吗？由于您使用的是表格，因此可以在父单元格上使用valign=“bottom”来获得您想要的效果，而无需使用上面包含所有内容的CSS行

请参见此小提琴中更新的HTML标记（以及删除的CSS行）：

删除位置：从下面的代码中删除绝对位置

div > span { position: absolute; right: 0; bottom: 0; }
您仍然可以发布一个jsfiddle，并稍微整理一下您的HTML，使您的问题更加清楚，以便我们能够提供帮助。年份在右边标题箭头的下方。@97ldave：是的，这是一个在大约一天半的时间里从概念到部署的急件。我没有时间讲细节，我很感激你们对丑陋代码的宽容。这更公正，我们可以给你们更多的帮助。看来你还是有答案；-）成功了。跨度是在其他地方（一个表单编号），但我忘了删除它，当我移动到另一个页面。