2016-09-03 3 views
2

eonasdan datetimepicker를 사용하고 있습니다. 옵션을 사용하여 기본 날짜를 선택했습니다. 크롬, 파이어 폭스 47.0 및 마이크로 소프트 edje 25.1을 사용하여 페이지를 열었습니다.날짜가 표시되지 않습니다. eonasdan datetimepicker

  • Firefox 사례 : 텍스트 필드에 날짜가 표시됩니다. 하지만 주소창에 으로 들어가서 '입력'을 누르면 텍스트 입력란 에 표시된 날짜가 사라집니다.
  • Chrome 및 edje 사례 : 페이지가 열리면 날짜가 텍스트 필드에 으로 표시되지 않습니다.

나는이 질문에 fiddle의 바이올린을 만들어, 어떤 바이올린에서 일어나는 것은 구글 크롬, 인터넷 익스플로러 경우에 발생하는 것과 동일합니다.

문제를 해결 한 datetimepicker에 대한 'viewDate : true'옵션을 사용해 보았습니다. 하지만 또 다른 문제가 생겼습니다. 캘린더 아이콘을 클릭하면 캘린더가 표시되지 않습니다.

왜 이런 일이 발생하는지 알 수 없습니다. 어떤 도움이라도 대단히 감사합니다.

바이올린의 동일한 코드는 다음과 같습니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title> 
       Example 
     </title> 
     <link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> 
     <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 

     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
     <![endif]--> 
     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
     <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded"> 
       <input type="hidden" name="j_idt11" value="j_idt11" />   
       <div class="row"> 
        <div class="col-md-4 col-md-offset-4">   
         <div class="panel panel-primary"> 
          <div class="panel-heading text-center"> 
           My Panel     
          </div>     
          <div class="panel-body"> 
           <div class="form-group text-right">                      
            <label class="text-right">My Date</label>   
            <div class="form-group">                         
             <div class='input-group date' id='d0'> 
              <input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" /> 
              <span class="input-group-addon"> 
               <span class="glyphicon glyphicon-time"></span> 
              </span> 
             </div> 
             <script type="text/javascript"> 
              $(function() {      
               var cID = "#"; 
               cID = cID.concat('d0'); 

               var t = '2016-09-03' 

               var options = { 
                 format: 'L',         
                 defaultDate: moment(t) 
                };      

               $(cID).datetimepicker(options);      
              }); 
             </script>     
            </div>   
           </div> 
          </div>                 
         </div> 
        </div>     
       </div>       
      </form> 
     </div> 
    </body> 
</html> 

답변

1

당신은 당신의 HTML에있는 DateTimePicker 입력 value 속성이 필요하지 않습니다. 당신이 그것을 제거하는 경우, 코드는 다음 예제와 켰을 때 작동합니다

var cID = "#"; 
 
cID = cID.concat('d0'); 
 
var t = '2016-09-03'; 
 
var options = { 
 
    format: 'L', 
 
    defaultDate: moment(t) 
 
};      
 
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded"> 
 
    <input type="hidden" name="j_idt11" value="j_idt11" />   
 
    <div class="row"> 
 
     <div class="col-md-4 col-md-offset-4">   
 
     <div class="panel panel-primary"> 
 
      <div class="panel-heading text-center"> 
 
      My Panel     
 
      </div>     
 
      <div class="panel-body"> 
 
      <div class="form-group text-right"> 
 
       <label class="text-right">My Date</label> 
 
       <div class="form-group"> 
 
       <div class='input-group date' id='d0'> 
 
        <input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" /> 
 
        <span class="input-group-addon"> 
 
        <span class="glyphicon glyphicon-time"></span> 
 
        </span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

당신이 옵션 개체를 설정하는 옵션 또는 data-date-options을 설정 data-date-*를 사용할 수있는 속성 데이터를 사용하려면 . 귀하의 경우 value 대신 data-date-default-date을 사용할 수 있습니다.

data-* 초기화 herehere에 대한 자세한 내용을 확인할 수 있습니다.

+0

빈센조 C. 네가 한 말이 맞다. 그러나 'value'속성은 JSF 렌더링에서 나온 것입니다. 이것이 value 속성이있는 이유입니다. 그렇지 않으면 텍스트 필드를 관리 Bean 속성에 어떻게 첨부 할 수 있습니까? –

+0

최종 해결책. 그것을하는 방법은 다음과 같습니다. 먼저 jsf 대신 에 의존합니다. 둘째, 텍스트 필드는 datetimepicker에서 값이 나올 것이므로 "value"속성을 가져서는 안됩니다. 셋째, jsf 에 의존하지 않기 때문에 양식을 제출 한 후 요청 매개 변수를 읽고 필요한 처리 또는 유효성 검사를 수행해야합니다. 이를 수행하는 방법은 https : //www.mkyong에 설명되어 있습니다.com/jsf2/how-to-pass-new-hidden-value-backing-bean-in-jsf / –

0

CDN :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 

<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> 

<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script> 

HTML :

<div class="row"> 
    <div class="col-md-12"> 
     <h6>datetimepicker1</h6> 

     <div class="form-group"> 
      <div class="input-group date" id="datetimepicker1"> 
       <input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> 
      </div> 
     </div> 
     <h6>datetimepicker2</h6> 
     <input type="text" class="form-control" id="datetimepicker2" /> 
    </div> 
</div> 

자바 스크립트 :

$('#datetimepicker1').datetimepicker(); 
$('#datetimepicker2').datetimepicker(); 

사용이 코드 ..

당신을 위해 도움이 의지 ..이

관련 문제