「カレンダーでクリックされた年月日を取得・表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

カレンダーでクリックされた年月日を取得・表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カレンダーでクリックされた年月日を取得・表示</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
<script type="text/javascript">
/**
* 年月日に指定された数値を足して返す
* ymdDate：日付データ
* 追加する項目：年月日のどれか（ymd）
* 追加する数値
*/
function addDate(ymdDate, target, add)
{
addNum = parseFloat(add);
yea = ymdDate.getFullYear();
mon = ymdDate.getMonth();
day = ymdDate.getDate();
if(target == "y")
{
yea += addNum;
}
else if(target == "m")
{
mon += addNum;
}
else if(target == "d")
{
day += addNum;
}
temp = new Date(yea, mon, day);
return new Date(yea, mon, day);
}
/**
* カレンダー用に日曜から1日、月末から土曜までを何かで埋め、配列にして返す
* year 表示するカレンダーの年
* month 表示するカレンダーの月
* Fill 日曜から1日まで、月末から土曜まで埋める文字
*/
function convertDayOfCalendar(year, month, Fill)
{
// 月初と月末
var startMonth = new Date(year + "/" + month + "/1");
var endMonth = addDate(new Date(year, month, 1), "d", -1);
// カレンダー用に日にちを配列化：
DayArray = new Array();
// 日曜～1日の空白を埋める。
for (i=0; i<startMonth.getDay(); i++)
{
DayArray.push(Fill);
}
// 月初め（1日）～月末までを埋める
for (i=0; i<endMonth.getDate(); i++)
{
DayArray.push(i+1);
}
// 月末～土曜の空白を埋める
if (endMonth.getDay() != 6)
{
startWeek = parseFloat(endMonth.getDay()) + 1;
for (i=startWeek; i<7; i++)
{
DayArray.push(Fill);
}
}
return DayArray;
}
// ▼ knockout.js ===========================================================
$(document).ready(function () {
ko.applyBindings(new ViewModel());
});
function ViewModel() {
var self = this;
self.year = ko.observable(2012);
self.mont = ko.observable(6);
date = convertDayOfCalendar(self.year(), self.mont(), "-");
self.dateData = ko.observableArray(date);
self.numVal = ko.observable();
self.when = ko.computed( function()
{
return self.year() + "/" + self.mont();
}, this);
self.nextClick = function()
{
// 来月
nextDate = addDate(new Date(self.year(), self.mont()-1, 1), "m", 1)
self.year(nextDate.getFullYear());
self.mont(nextDate.getMonth()+1);
// 来月データの日にち一覧
date = convertDayOfCalendar(self.year(), self.mont(), "-");
self.dateData(date);
}
self.prefClick = function()
{
// 前月
prefDate = addDate(new Date(self.year(), self.mont()-1, 1), "m", -1)
self.year(prefDate.getFullYear());
self.mont(prefDate.getMonth()+1);
// 前月データの日にち一覧
date = convertDayOfCalendar(self.year(), self.mont(), "-");
self.dateData(date);
}
self.viewNum = function(e)
{
viewData = "";
if (e.toString().match(/^[0-9]+$/) != null)
{
viewData = self.year() + "/" + self.mont() + "/" + e;
}
self.numVal(viewData);
}
}
</script>
<style type="text/css">
td
{
border:1px solid #ccc;
}
td:hover
{
background:#ffddff;
cursor:pointer;
}
</style>
</head>
<body>
<h1>カレンダーでクリックされた年月日を取得・表示</h1>
<h2 data-bind="text: when"></h2>
<table>
<thead><tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr></thead>
<tr>
<td data-bind="text: dateData()[0], click: function(){$root.viewNum(dateData()[0]);}"></td>
<td data-bind="text: dateData()[1], click: function(){$root.viewNum(dateData()[1]);}"></td>
<td data-bind="text: dateData()[2], click: function(){$root.viewNum(dateData()[2]);}"></td>
<td data-bind="text: dateData()[3], click: function(){$root.viewNum(dateData()[3]);}"></td>
<td data-bind="text: dateData()[4], click: function(){$root.viewNum(dateData()[4]);}"></td>
<td data-bind="text: dateData()[5], click: function(){$root.viewNum(dateData()[5]);}"></td>
<td data-bind="text: dateData()[6], click: function(){$root.viewNum(dateData()[6]);}"></td>
</tr>
<tr>
<td data-bind="text: dateData()[7], click: function(){$root.viewNum(dateData()[7]);}"></td>
<td data-bind="text: dateData()[8], click: function(){$root.viewNum(dateData()[8]);}"></td>
<td data-bind="text: dateData()[9], click: function(){$root.viewNum(dateData()[9]);}"></td>
<td data-bind="text: dateData()[10], click: function(){$root.viewNum(dateData()[10]);}"></td>
<td data-bind="text: dateData()[11], click: function(){$root.viewNum(dateData()[11]);}"></td>
<td data-bind="text: dateData()[12], click: function(){$root.viewNum(dateData()[12]);}"></td>
<td data-bind="text: dateData()[13], click: function(){$root.viewNum(dateData()[13]);}"></td>
</tr>
<tr>
<td data-bind="text: dateData()[14], click: function(){$root.viewNum(dateData()[14]);}"></td>
<td data-bind="text: dateData()[15], click: function(){$root.viewNum(dateData()[15]);}"></td>
<td data-bind="text: dateData()[16], click: function(){$root.viewNum(dateData()[16]);}"></td>
<td data-bind="text: dateData()[17], click: function(){$root.viewNum(dateData()[17]);}"></td>
<td data-bind="text: dateData()[18], click: function(){$root.viewNum(dateData()[18]);}"></td>
<td data-bind="text: dateData()[19], click: function(){$root.viewNum(dateData()[19]);}"></td>
<td data-bind="text: dateData()[20], click: function(){$root.viewNum(dateData()[20]);}"></td>
</tr>
<tr>
<td data-bind="text: dateData()[21], click: function(){$root.viewNum(dateData()[21]);}"></td>
<td data-bind="text: dateData()[22], click: function(){$root.viewNum(dateData()[22]);}"></td>
<td data-bind="text: dateData()[23], click: function(){$root.viewNum(dateData()[23]);}"></td>
<td data-bind="text: dateData()[24], click: function(){$root.viewNum(dateData()[24]);}"></td>
<td data-bind="text: dateData()[25], click: function(){$root.viewNum(dateData()[25]);}"></td>
<td data-bind="text: dateData()[26], click: function(){$root.viewNum(dateData()[26]);}"></td>
<td data-bind="text: dateData()[27], click: function(){$root.viewNum(dateData()[27]);}"></td>
</tr>
<tr data-bind="if: 28<dateData().length">
<td data-bind="text: dateData()[28], click: function(){$root.viewNum(dateData()[28]);}"></td>
<td data-bind="text: dateData()[29], click: function(){$root.viewNum(dateData()[29]);}"></td>
<td data-bind="text: dateData()[30], click: function(){$root.viewNum(dateData()[30]);}"></td>
<td data-bind="text: dateData()[31], click: function(){$root.viewNum(dateData()[31]);}"></td>
<td data-bind="text: dateData()[32], click: function(){$root.viewNum(dateData()[32]);}"></td>
<td data-bind="text: dateData()[33], click: function(){$root.viewNum(dateData()[33]);}"></td>
<td data-bind="text: dateData()[34], click: function(){$root.viewNum(dateData()[34]);}"></td>
</tr>
</table>
<button data-bind="click: prefClick">前月</button>
<button data-bind="click: nextClick">来月</button>
<br />
<p>クリックされた日にち<br /><input type="text" data-bind="value: numVal"></p>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>