<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>
2014년 6월 2일 월요일
jquery datepicker 사용방법
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기