<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)
댓글 없음:
댓글 쓰기