더 나은 프로그래머가 되자

datepicker 설정 본문

언어/js

datepicker 설정

greathuman 2015. 1. 22. 11:40

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
<!--
.ui-datepicker { font:12px dotum; }
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 70px;}
.ui-datepicker-trigger { margin:0 0 -5px 2px; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<SCRIPT type=text/javascript> 
    var dtNow = new Date(); 
   $(document).ready(function () { 
        // 선택된 값 세팅 
        EvtChangeMonthYear(dtNow.getFullYear() , dtNow.getMonth()); 
    }); 
 
    $(function ()  { 
        $("#c_time").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,
   buttonImage: "/images/calendar.gif",
            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>  

 

Comments