jquery datepicker month/year jumbled

jquery datepicker를 사용하고 있지만 캘린더 팝업이 표시되면 월 및 연도 텍스트가 캘린더 제목 표시 줄의 맨 오른쪽에 뒤죽박죽입니다.jquery datepicker month/year jumbled

나는 약간의 CSS로 연주했지만, 퉁명스럽게 솔직히 말하면, 너무 놀 시간이 없다.

도움이 되었으면 좋겠습니다.

나는 그림을 게시 하겠지만, 평판 (?) 점수가 10 점이 될 때까지는 허용하지 않습니다.

html로 :

div > span { position: absolute; right: 0; bottom: 0; }

올바르게 다시 및 달력 표시를 제거

<%@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>

출처

2013-05-23 Bob Stout

당신은 여전히 jsfiddle –

를 게시 그리고 당신의 HTML을 정돈 할 수 있습니다 우리가 도울 수 있도록 좀 더 명확하게 문제를 해결하기 위해 조금. – 97ldave

[JsFiddle] (http://jsfiddle.net/YkdZ4/). 연도는 오른쪽의 제목 화살표 아래에 있습니다. – PenguinCoder

그것은 문제의 원인 CSS의 라인입니다.

선택기가 현재 너무 일반적이어서 (div의 직계 하위 항목 인 모든 범위를 선택 함) 의도 한 용도에 맞게 더 구체적으로 재 작성해야합니다. http://jsfiddle.net/YkdZ4/1/

당신은 바닥에 회색 줄에 모든 정렬 그 라인을 사용하고있는 것 같습니다이 올바른 것이 있습니다 :

여기에 제거 CSS의 라인과 함께 바이올린을 참조하십시오? 어쨌든 테이블을 사용하고 있기 때문에 상위 셀의 valign = "bottom"을 사용하면 위의 모든 CSS 라인을 사용하지 않고도 효과를 얻을 수 있습니다. http://jsfiddle.net/YkdZ4/2/

출처

2013-05-23 14:00:58 johnkavanagh

그랬습니다. 스팬은 다른 형식 (양식 번호)으로되어 있었지만 다른 페이지로 옮길 때 삭제하는 것을 잊었습니다. –

제거 위치 :

여기에이 바이올린에서 업데이트 된 HTML 마크 업 (제거 CSS 라인)을 참조하십시오 코드 아래에서 절대

div > span { position: absolute; right: 0; bottom: 0; }

출처

2013-05-23 14:08:19

jquery datepicker month/year jumbled

답변

관련 문제