Datepicker を試してみた
August 11, 2013 – 9:56 amjQuery UIで提供される機能のひとつにDatePickerがある。このDatepicker、日付の選択・入力をグラフィカルに（カレンダー画面上で）行なうためのウィジェットだ。
このDatePickerを活用して、日付入力画面を実際に試作してみた。
日付入力ウィジェットの作成： 今回試作したウィジェットは以下のようなものだ。
このウィジェットを描画するのに用いたHTMLを与えておく。
試作したカレンダー(Datepicker):
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<title>
Date Picker の例
</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style type="text/css">
/*日曜日の背景を変える */
.ui-datepicker-sunday .ui-state-default {
background-image:none;
background-color: #FFF0F5;
}
/*土曜日の背景を変える */
.ui-datepicker-saturday .ui-state-default {
background-image:none;
background-color: #F0F8FF;
}
/*指定日の背景を変える */
.ui-datepicker-date-exist .ui-state-default {
background-image : none;
background-color : #FFDD00;
}
</style>
<script>
$(function() {
var year_chk = 2013;
var month_chk = 7;
var date_chk = 21;
var minD = new Date(2012, 0, 1);
var maxD = new Date(2013, 12, 31)
$.datepicker.setDefaults({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: 'ddmmyy'
});
$('#txtDate').datepicker({
minDate: minD,
maxDate: maxD,
showOtherMonths: true,
beforeShowDay: function(dt) {
if(dt.getFullYear()==year_chk && dt.getMonth()==month_chk && dt.getDate()==date_chk) { return [true,"ui-datepicker-date-exist"];
//日曜日
} else if(dt.getDay() == 0) {
return [true,"ui-datepicker-sunday"];
//土曜日
} else if(dt.getDay() == 6){
return [true,"ui-datepicker-saturday"];
//平日
} else {
return [true];
}
},
onSelect: function (dateText, inst) {
alert("test:onSelect:" + dateText);
}
});
});
</script>
</head>
<body>
<div id="txtDate"></div>
</body>
</html>
参考サイト： http://jqueryui.com/datepicker/