2014년 6월 2일 월요일

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>


댓글 없음:

댓글 쓰기