datepicker-config.js（一部抜粋）：「onSelect:」は日付が変更された際に実行される
// 日付が変更された時のイベント設定
onSelect: function(dateText, inst){
// 選択日をYYYYMMDD形式でformに設定
document.getElementById('selectDate').value = formatDateToString(new Date(inst.currentYear, inst.currentMonth, inst.currentDay));
// submit()でフォームの内容を送信
$('#echoForm').submit();
}datepicker-config.js
$( function() {
// 選択可能な日付範囲の最小値
var selectableMinDate = toDate(document.getElementById('fromDate').value);
// 選択可能な日付範囲の最大値
var selectableMaxDate = toDate(document.getElementById('toDate').value);
$( "#datepicker" ).datepicker({
showOn: "both",
buttonImage: imageUrlCalIcon,
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy年m月d日',
minDate: selectableMinDate,
maxDate: selectableMaxDate,
showButtonPanel: false, // ボタンパネルを表示
gotoCurrent: false, // ボタンパネルに当日日付のボタン表示
prevText: '前月',
nextText: '翌月',
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: "週",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
showOtherMonths: true,
selectOtherMonths: false,
yearSuffix: "年",
monthSuffix: "月",
beforeShowDay: function(date) {
// 日曜日
if (date.getDay() == 0) {
return [true, 'sunday'];
}
// 土曜日
if (date.getDay() == 6) {
return [true, 'saturday'];
}
// 平日
return [true, 'weekday'];
},
// 日付が変更された時のイベント設定
onSelect: function(dateText, inst){
// 選択日をYYYYMMDD形式でformに設定
document.getElementById('selectDate').value = formatDateToString(new Date(inst.currentYear, inst.currentMonth, inst.currentDay));
// submit()でフォームの内容を送信
$('#echoForm').submit();
}
});
} );
// 日付変換（日付型→文字列型）
// 日付文字列（yyyyMMdd）
function formatDateToString (date) {
var yyyymmdd = date.getFullYear()+
( "0"+( date.getMonth()+1 ) ).slice(-2)+
( "0"+date.getDate() ).slice(-2);
return yyyymmdd;
};
// 日付変換（文字列型→日付型）
// str: 日付文字列（yyyyMMdd）
function toDate (str) {
var arr = (str.substr(0, 4) + '/' + str.substr(4, 2) + '/' + str.substr(6, 2)).split('/');
return new Date(arr[0], arr[1] - 1, arr[2]);
};JSP
<html>
<head>
<link href="<c:url value="/resources/css/jquery-ui.css"/>" rel="stylesheet">
<link href="<c:url value="/resources/css/datepicker-ver1.03.css"/>" rel="stylesheet">
<link href="<c:url value="/resources/css/firstapp1.css"/>" rel="stylesheet">
<script src="<c:url value="/resources/js/jquery-1.12.4.js"/>"></script>
<script src="<c:url value="/resources/js/jquery-ui-1.12.1-customize-ver1.03.js"/>"></script>
<script src="<c:url value="/resources/js/datepicker-config-ver1.03.js"/>"></script>
<script src="<c:url value="/resources/js/firstapp1.js"/>"></script>
<%-- URLを変数に格納する--%>
<c:url var="imageUrl" value="/resources/img/cal-32.png" />
<c:url var="actionUrl" value="/echo2/initCallender.do"/>
<%-- イメージのURLをjavascriptの変数に格納する--%>
<script type="text/javascript">
var imageUrlCalIcon = "${imageUrl}";
</script>
<%-- 前日リンク --%>
<script type="text/javascript">
function onClickPrev() {
document.getElementById('selectDate').value = document.getElementById('prevDate').value
$('#echoForm').submit();
};
</script>
<%-- 翌日リンク --%>
<script type="text/javascript">
function onClickNext() {
document.getElementById('selectDate').value = document.getElementById('nextDate').value
$('#echoForm').submit();
};
</script>
</head>
<body>
<h2>カレンダー画面</h2>
<form:form modelAttribute="echoForm" action="${actionUrl}">
<div>
<div>
カレンダーの選択可能期間：開始日＝<form:input path="fromDate"/>～終了日＝<form:input path="toDate"/>
</div>
<div>
前日＝<form:input path="prevDate"/>：翌日＝<form:input path="nextDate"/>
<c:out value="${echoForm.prevDate}" />
<c:out value="${echoForm.nextDate}" />
</div>
<div>
対象期間:
<c:if test="${echoForm.prevDate == ''}" >
<span class=" ui-state-disabled">
<a href="javascript:onClickPrev();">前日</a>
</span>
</c:if>
<c:if test="${echoForm.prevDate != ''}" >
<span>
<a href="javascript:onClickPrev();">前日</a>
</span>
</c:if>
<span><form:input class="date-picker-yearmonth" path="displayDate" id="datepicker" /></span>
<c:if test="${echoForm.nextDate == ''}" >
<span class=" ui-state-disabled">
<a href="javascript:onClickNext();">翌日</a>
</span>
</c:if>
<c:if test="${echoForm.nextDate != ''}" >
<span>
<a href="javascript:onClickNext();">翌日</a>
</span>
</c:if>
</div>
<div>
カレンダーで選択した日：<form:input path="selectDate"/>
</div>
<p>
<div>imageUrl:「${imageUrl}」→link:「<a href="${imageUrl}">imageUrl</a>」</div>
<%-- イメージ表示 --%>
<img src="<c:url value="/resources/img/cal-32.png"/>"/>
</p>
</div>
</form:form>
</body>
</html>