ㅤㅤㅤ

JQuery를 이용한 달력 datepicker 본문

プログラミング/JavaScript JQuery

JQuery를 이용한 달력 datepicker

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 2017. 6. 22. 14:31

웹페이지를 프로그래밍 하다보면 년,월,일 등의 날짜를 입력해야 할 필요가 있는데요. 그런 때 달력이 필요하죠? 그런데 달력을 직접 만들자니 그렇고... 또 인터넷에 있는 소스를 또 그대로 가져다 쓰자니 또 그렇고 여러가지 고민이 되었습니다.


그런데 JQuery에서 제공하는 Datepicker라는 녀석을 이용하니 금방 되더라구요. 


디자인은 투박하지만 달력으로의 기능은 문제없으니 간단하게 사용해주면 될 것 같네요.



Datepicker라고 해서 소스가 길 것 같다구요? 소스도 간단합니다.


<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
 $(function() {
  $("#datepicker").datepicker();
 });
</script>
</head>
<body>
 <p>
  Date: <input type="text" id="datepicker" />
 </p>
</body>
</html>


위의 소스를 그대로 복사 & 붙여넣기 하시면 JQuery를 이용한 간단한 달력이 완성됩니다.




소스 응용하기


위의 소스를 조금만 응용해 볼까요?

위에 보이는 실행 결과와 조금은 다른 화면임을 알 수 있는데요. 


년도와 월을 콤보박스 형태로 선택할 수 있고 월과 요일이 한글로 나오네요. 소스코드를 어떻게 수정하면 되는지 아래의 소스를 보시기 바랍니다.



<script type="text/javascript">
 $(function() { 
  $(".datepicker").datepicker({
	dateFormat: 'yymmdd',
	monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
     dayNamesMin: ['일','월','화','수','목','금','토'],
	 changeMonth: true, //월변경가능
     changeYear: true, //년변경가능
	 showMonthAfterYear: true, //년 뒤에 월 표시
  });
 });
</script>



더 자세한 정보는 아래의 페이지를 참고하세요.


http://jqueryui.com/datepicker/



jquery datepicker 사용방법

<pre class="jscript" name="code">
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script> 
<script src="/Scripts/jquery-ui-1.10.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker-ko.js" type="text/javascript"></script>


<style type="text/css">
 .ui-datepicker{ font-size: 13.2px; width: 293px; height:295px; z-index:100; margin:0px;}
</style>
<script type="text/javascript">
    var dtNow = new Date();
 $(document).ready(function () {
        // 선택된 값 세팅
        EvtChangeMonthYear(dtNow.getFullYear() , dtNow.getMonth());
    });

    $(function ()
 {
        $("#dtpicker").datepicker({
            dateFormat: 'yy-mm-dd', // 데이터는 yyyy-MM-dd로 나옴
            closeText: '닫기',
            prevText: '이전달',
            nextText: '다음달',
            currentText: '오늘',
            monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            dayNames: ['일', '월', '화', '수', '목', '금', '토'],
            dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
            dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
            weekHeader: 'Wk',
            firstDay: 0,
            isRTL: false,
            duration: 200,
            showAnim: 'show',
            maxDate: dtNow,       // 오늘 날자이후 데이터 클릭은 막기위해
            //changeMonth: true,
            //changeYear: true,
            //yearRange: 'c-10:c',
            showMonthAfterYear: true,
            yearSuffix: '년',
            showOtherMonths: true, // 나머지 날짜도 화면에 표시
            selectOtherMonths: true, // 나머지 날짜에도 선택을 하려면 true
            defaultDate: dtAsk,

            onChangeMonthYear: function (year, month, inst) {
    // 년 또는 월이 변경시 이벤트 발생
                EvtChangeMonthYear(year, month);
            },

            beforeShow: function (input, inst) {
    // 일자 선택되기전 이벤트 발생
            },
            onSelect: function (dateText, inst) {
    // 일자 선택된 후 이벤트 발생
            }
        });
        $.datepicker.setDefaults($.datepicker.regional['ko']);
    });

    


    // 월이나 년이 바뀔때의 이벤트
    function EvtChangeMonthYear(Year, Month) {
        $(".ui-datepicker-current-day").attr("style", "background-color:#ff0000;");  // 선택된 날자에 테두리를 만든다.
  var arrSplit = ($("#dtpicker").val()).split("-");        // 선택된 날자를 배열로 받음

  var vDt = new Date();
        var Day = getStrDay(vDt.getDate());
        var dtMin = new Date(Year, Month - 1, 1);

        dtMin = new Date(Year, Month - 1, 1 - dtMin.getDay());       // 달력의 최초 날자를 구하기 위해
        var strMin = dtMin.getFullYear() + "-" + getStrMonth(dtMin.getMonth() + 1) + "-" + getStrDay(dtMin.getDate());
        var dtMax = new Date(new Date(Year, Month, 1) - 86400000);

        var dtMax = new Date(Year, Month - 1, dtMax.getDate() + 6 - dtMax.getDay()); // 달력의 마지막 날자를 구하기 위해
        var strMax = dtMax.getFullYear() + "-" + getStrMonth(dtMax.getMonth() + 1) + "-" + getStrDay(dtMax.getDate());

//        var strUrl = "/Lab/NDailyCheck/GetDailyMonthsAjx";
//        var vLabNo = "@LabNo";
//        var selCheckGubun = $("#CheckGubunVal").val();

//        $.ajax({
//            type: 'POST',
//            async: true,    //비동기
//            dataType: "json",
//            url: strUrl,
//            data: { LabNo: vLabNo, CheckGubun: selCheckGubun, dtMinDay: strMin, dtMaxDay: strMax },
//            success: function (data) {   // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.
//                MathMonths(data, strMin);
//            },
//            complete: function (data) {   // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.
//            },
//            error: function (xhr, status, error) {
//                alert("통신에러 → " + xhr.responseText + ":" + error);
//            }
//        });
    }


    function getStrMonth(Month) {
        Month = Month + "";
        if (Month.length == 1) {
            Month = "0" + Month;
        }
        return Month;
    }

    function getStrDay(Day) {
        Day = Day + "";
        if (Day.length == 1) {
            Day = "0" + Day;
        }
        return Day;
    }
</script>

<div class="box_Calendar" id="dtpicker"> 

</div>



'プログラミング > JavaScript JQuery' 카테고리의 다른 글

JavaScript에서 json을 Parse하는 방식입니다.  (0) 2017.06.27
JavaScript에서 json을 생성 하는 방식입니다.  (0) 2017.06.27
JSON 튜토리얼  (0) 2017.06.27
JSON 은 무엇인가? 개요 알아보기  (0) 2017.06.23
자바스크립트 셀렉트박스 날짜 선택!  (0) 2017.06.23
공유하기 링크
'プログラミング/JavaScript JQuery' Related Articles more
Comments