JQuery Datepicker 를 이용한 달력.

인터넷에 넘 복잡시럽고 어려운게 많아서.. 여기저기 블로그에서 본 것들을 합치고 내가 직접 해본걸루 정리해두기

 

보통 통계검색시 시작일,종료일로 많이 달력스크립트 넣는데.. 자바스크립트로 웹에 돌아다니는건 넘 복잡해여 ㅋㅋ

제이쿼리로 클린하게! ㅋㅋ

친절하게 인풋박스 2개인 경우로  ^^

 

 

 

소스는 아래 더보기를 누르면 있구요.. 같은색깔끼리 잘 맞춰주심됩니당.

 

빨간색으로 표시한 부분은 input 박스 우측에 달력이미지버튼이 바로붙거나 위로붙어나오는경우가 있는데

해당 css로 조절해준거구요. 사이트 ui에따라 조절해주시면 됩니다.

그밑에 hide()는 이게 div영역이 하나 잡히는데 보기싫어서 감추어주었습니다. 요것도 각 사이트에 맞게 사용하심 될듯합니다.

 

도움이 되셧다면 공감, 덧글 꾸욱~^^

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

<script language="javascript" type="text/javascript">
$(document).ready(function() {

//******************************************************************************
// 상세검색 달력 스크립트
//******************************************************************************
var clareCalendar = {
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
dateFormat: 'yymmdd', //형식(20120303)
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: true, //이미지표시
buttonText: '달력선택', //버튼 텍스트 표시
buttonImage: 'res/img/comn/calendar.gif', //이미지주소
showOn: "both", //엘리먼트와 이미지 동시 사용(both,button)
yearRange: '1990:2020' //1990년부터 2020년까지
};
$("#fromDt").datepicker(clareCalendar);
$("#toDt").datepicker(clareCalendar);
$("img.ui-datepicker-trigger").attr("style","margin-left:5px; vertical-align:middle; cursor:pointer;"); //이미지버튼 style적용
$("#ui-datepicker-div").hide(); //자동으로 생성되는 div객체 숨김
});

</script>

 

 

<input name="fromDt" type="text" id="fromDt" size="8" maxlength="8" title="시작일자"> ~
<input name="toDt" type="text" id="toDt" size="8" maxlength="8" title="종료일자">