jquery datepicker 코드 문의 드립니다.
관련링크
본문
jqueryui.com/datepicker/ 에서 datepicker 즉 달력을 출력하는 코드를 다운받았습니다.
홈페이지에 적용해보니 바로 달력이 출력되지 않고 터치해야 출력이 되는데 바로 달력이 출력되게 하는 방법이 없는지요?
code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>달력</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" value="Today is?"></p>
</body>
</html>
답변 6
trigger()를 이용하시면 됩니다.
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).trigger("select");
} );
</script>
항상 보여지게 하는 방법은 의외로 간단합니다.
<input> 요소에 datepicker를 연결하지 말고 다른 요소들에 연결하고 input 요소에 선택된 값을 넘겨주는 방식으로 테스트해보세요.
<div id="test"></div>
<input type="text" id="date_input">
<script>
$('#test').datepicker({
onSelect: function(date, obj){
$('#date_input').val(date);
}
});
</script>
혹은, 애초에 보여지고 안보여지고를 컨트롤할 수 있는 옵션을 가진 datepicker 플러그인들을 사용하는 것도 방법입니다.
그누5에서도 기본적으로 제공을 합니다.
플러그인쪽 보시면요
/plugin/jquery-ui/datepicker.php
여기서 기본적으로 제공을 하고 있습니다.
참고 하실 소스는 다음과 같습니다
<?php
// 먼저 datepicker.php를 include를 하셔야겠죠 ^^
include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
?>
<script>
// 입력하실 id값의 이름을 선언해주시면됩니다. 그리고 나머지들은 옵션입니다 참고 하시구요.
// 참고로 2개 시작일과 종료일을 기준으로 설정되어있습니다.
$(function(){
$("#fr_date, #to_date").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, yearRange: "c-99:c+99", maxDate: "+0d" });
});
</script>
<div class="sch_last">
<strong>기간별검색</strong>
<input type="text" name="fr_date" value="<?php echo $fr_date ?>" id="fr_date" class="frm_input" size="11" maxlength="10">
<label for="fr_date" class="sound_only">시작일</label>
~
<input type="text" name="to_date" value="<?php echo $to_date ?>" id="to_date" class="frm_input" size="11" maxlength="10">
<label for="to_date" class="sound_only">종료일</label>
<input type="submit" value="검색" class="btn_submit">
</div>
이렇게 사용하시면 됩니다. 시작일과 종료일 모두 달력이 생성됩니다.
datepicker 함수를 바로 실행되게하세요
답변주신 모든 분께 감사드립니다. 하나 하나가 모두 초보에게는 큰도움이 됩니다.^^
감사합니다^^ 많은 도움이 되었습니다.
