WeekPicker.zip달력 클릭하면 월요일~금요일까지 한번에 선택되는 제이쿼리 소스입니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" type="text/css" media="screen" href="../jquery-ui-1.8.14/themes/base/jquery-ui.css"> -->
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
$('#week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
selectWeek:true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
var dateFormat = 'yy/mm/dd'
startDate = $.datepicker.formatDate( dateFormat, startDate, inst.settings );
endDate = $.datepicker.formatDate( dateFormat, endDate, inst.settings );
$('#week-picker').val(startDate + '~' + endDate);
setTimeout("applyWeeklyHighlight()", 100);
},
beforeShow : function() {
setTimeout("applyWeeklyHighlight()", 100);
}
});
});
function applyWeeklyHighlight() {
$('.ui-datepicker-calendar tr').each(function() {
if ($(this).parent().get(0).tagName == 'TBODY') {
$(this).mouseover(function() {
$(this).find('a').css({
'background' : '#ffffcc',
'border' : '1px solid #dddddd'
});
$(this).find('a').removeClass('ui-state-default');
$(this).css('background', '#ffffcc');
});
$(this).mouseout(function() {
$(this).css('background', '#ffffff');
$(this).find('a').css('background', '');
$(this).find('a').addClass('ui-state-default');
});
}
});
}
</script>
</head>
<body>
<input type="text" id ="week-picker">
</body>
</html>
