html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/jquery-ui.css">
<script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>
<title>查看已上線需求</title>
</head>
<body>
<div class='mycontainer'>
<table>
<tr>
<td>日期
<input id="dateWeekRange" type="text" class="datePicker input-sm" placeholder="選擇時間段" />
</td>
</tr>
</table>
<br/>
<div id="showChart"></div>
</div>
</body>
</html>javascript：
<script type="text/javascript">
$(document).ready(function(e) {
var date = new Date();
var mondayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
var sundayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var startDateStr = $.datepicker.formatDate('yy-mm-dd', mondayDate);
var endDateStr = $.datepicker.formatDate('yy-mm-dd', sundayDate);
$('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
});
var startDate;
var endDate;
jQuery(function($) {
$.datepicker.regional['zh-CN'] = {
firstDay: 1,
initStatus: '請選擇日期',
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
var selectCurrentWeek = function() {
window.setTimeout(function() {
$('#dateWeekRange').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#dateWeekRange').datepicker({
showOtherMonths: true,
selectOtherMonths: 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() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
var startDateStr = $.datepicker.formatDate('yy-mm-dd', startDate, inst.settings);
var endDateStr = $.datepicker.formatDate('yy-mm-dd', endDate, inst.settings);
$('#dateWeekRange').val(startDateStr + " ~ " + endDateStr);
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if (date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$(document).on("mousemove", ".ui-datepicker-calendar tr", function() {
$(this).find('td a').addClass('ui-state-hover');
});
$(document).on("mouseleave", ".ui-datepicker-calendar tr", function() {
$(this).find('td a').removeClass('ui-state-hover');
});
});
</script>效果如下：
jQuery 1.7之後live()就被廢棄了，用.on()替代
// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} );