参考にさせて頂いたページ
絶対表示の位置変更について position()
jQuery UI Datepicker（カレンダー）表示位置の調整 | Eniod's Blog
jQuery UI Datepicker（カレンダー）表示位置の変更 サンプル
.position() | jQuery UI API Documentation
jQuery UI の Position メソッドで要素の表示位置を指定する
Datepickerについて
Datepicker Widget | jQuery UI API Documentation
datepickerにおけるオプション（datepicker） | IT情報サイト - 明日はどっと混む
jQuery UI Datepicker（カレンダー）土・日・祝日の表示色の変更
はじめに
これまでなんとなく使ってきたけど、いざ配置場所を変えようしたり、曜日ごとに色を変えようと思ったらよくわからなかったので改めて学習した。
jQuery UI のDatepickerでカレンダーを表示して、positionで表示位置を調整したり、インラインで配置することで色々なデザインに対応できそう。
オプションの一覧についても、datepickerにおけるオプション（datepicker） | IT情報サイト - 明日はどっと混むに日本語で書いてあったのでありがたい。
こちらは公式でメソッドについても書いてある。 Datepicker Widget | jQuery UI API Documentation
サンプルコード
例として以下の通り。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$( "#datepicker" ).datepicker({
showOn: 'both',
showAnim: 'fadeIn',
numberOfMonths: 1,
buttonImage: 'img/hoge.gif',
buttonImageOnly: true,
minDate: '0',
maxDate: '+3m',
dateFormat: 'yy/mm/dd',
beforeShowDay: function(date){
var calendar = $('#ui-datepicker-div');
setTimeout(function() {
calendar.position({
my: 'left top', // カレンダーのここを
at: 'center bottom',// ofで指定した要素のここに
of: '#here'
});
}, 1);
// 日曜日
if (date.getDay() == 0) {
return [true, 'sunday']; //[クリッカブルかどうか, クラス名]
}
// 土曜日
if (date.getDay() == 6) {
return [true, 'saturday'];
}
// 平日
return [true, ''];
}
});
$( "#datepicker2" ).datepicker({
showOn: 'both',
showAnim: 'fadeIn',
numberOfMonths: 1,
buttonImage: 'img/hoge.gif',
buttonImageOnly: true,
minDate: '0',
maxDate: '+3m',
dateFormat: 'yy/mm/dd',
beforeShowDay: function(date){
var calendar = $('#ui-datepicker-div');
setTimeout(function() {
calendar.position({
my: 'left top', // カレンダーのここを
at: 'center bottom',// ofで指定した要素のここに
offset: '100px 30px',
of: '#here2'
});
}, 1);
// 日曜日
if (date.getDay() == 0) {
return [true, 'sunday']; //[クリッカブルかどうか, クラス名]
}
// 土曜日
if (date.getDay() == 6) {
return [true, 'saturday'];
}
// 平日
return [true, ''];
}
});
$( "#datepicker3" ).datepicker({
onSelect: function(dateText, inst) {
$("#date_val").val(dateText);
}
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>日付: <input type="text" id="datepicker" /> <input type="text" id="datepicker2" /></p>
<br><br><br>
<span id="here">absolute1</span>
<br><br><br>
<span id="here2">absolute2</span>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>インライン配置されるカレンダー(絶対配置されない)</p>
<div id="datepicker3">
<input id="date_val" type="text">
</div>
<p id="test"></p>
</body>
</html>
.position()のオプション
jQuery UI の Position メソッドで要素の表示位置を指定するによると、以下のようなオプションが設定できるらしい。
- my
- at
- of
- offset
- collision
- using
今回はここまで。
