javascript:yahho-calendar
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
javascript:yahho-calendar [2010/05/14 06:48] – ダウンロード元変更 dgbadmin | javascript:yahho-calendar [2018/03/10 12:30] (現在) – [サンプル] サンプル7を追加 dgbadmin | ||
---|---|---|---|
行 5: | 行 5: | ||
{{javascript: | {{javascript: | ||
- | [[http://developer.yahoo.com/yui/ | + | Webのformで日付を入力する際に日付の選択をしやすくするためのポップアップカレンダー(Datepikcer)を表示するJavaScriptライブラリです。別Windowで開くのではなく、form上に表示します。(サンプルを見てもらうと分かりやすいと思います。) |
- | 合わせて[[google-calendar-holidays|GCalendar Holidays]]を使うと祝日の表示もできます。\\ | + | |
+ | カレンダーは[[http://yui.github.io/yui2/|YUI 2 (Yahoo! UI Library | ||
+ | また、これと合わせて[[google-calendar-holidays|GCalendar Holidays]]を使うとカレンダー上に祝日の表示もできてます。\\ | ||
Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。) | Yahoo!の日本版ということでヤッホーという名前にしました。(昔、Yahho!てサイトありましたね。) | ||
行 13: | 行 15: | ||
===== サンプル ===== | ===== サンプル ===== | ||
[[http:// | [[http:// | ||
- | [[http:// | + | [[http:// |
[[http:// | [[http:// | ||
[[http:// | [[http:// | ||
[[http:// | [[http:// | ||
+ | [[http:// | ||
+ | [[http:// | ||
※サンプルで使っているのは最新のBeta版の場合あり | ※サンプルで使っているのは最新のBeta版の場合あり | ||
行 23: | 行 27: | ||
===== ライセンス ===== | ===== ライセンス ===== | ||
Yahho Calendarは[[http:// | Yahho Calendarは[[http:// | ||
- | 内部的に使っているYUIは[[http://developer.yahoo.com/yui/license.html|BSDライセンス]]です。\\ | + | 内部的に使っているYUIは[[https://github.com/yui/yui3/ |
- | YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合は[[http://code.google.com/ | + | YahhoCal.loadYUI()を使うと、デフォルトではGoogleによってホスティングされているYUIのファイルがロードされます。これを使う場合は[[https://developers.google.com/ |
- | また、祝日を表示する場合は[[http://www.google.com/ | + | また、祝日を表示する場合は[[https://developers.google.com/ |
===== ダウンロード ===== | ===== ダウンロード ===== | ||
- | [[http:// | + | [[http://g.0-oo.net/ |
< | < | ||
行 89: | 行 93: | ||
* 概要 | * 概要 | ||
* Yahho Calendarで必要なYUIのファイル(JavaScriptとCSS)をGoogleのWebサーバから読み込む。 | * Yahho Calendarで必要なYUIのファイル(JavaScriptとCSS)をGoogleのWebサーバから読み込む。 | ||
- | * 参考:[[http:// | ||
* パラメータ | * パラメータ | ||
* yuiBase : 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す | * yuiBase : 省略可。省略すると、GoogleのサーバからYUIをロードする。自分のサーバからYUIをロードする場合、YUIへのURLのベースとなる部分を渡す | ||
行 149: | 行 152: | ||
<code javascript> | <code javascript> | ||
/** | /** | ||
- | | + | |
| | ||
- | | + | |
- | | + | |
| | ||
* | * | ||
行 164: | 行 167: | ||
| | ||
| | ||
- | | + | |
*/ | */ | ||
YUI_URL: { | YUI_URL: { | ||
SERVER: location.protocol + "// | SERVER: location.protocol + "// | ||
- | VERSION: "2.8.0r4", | + | VERSION: " |
DIR: "/ | DIR: "/ | ||
}, | }, | ||
行 180: | 行 183: | ||
//土曜日 | //土曜日 | ||
" | " | ||
- | // | + | // |
" | " | ||
// | // | ||
行 217: | 行 220: | ||
] | ] | ||
}, | }, | ||
- | //中国語 | + | //中国語(繁体字も簡体字も同じ) |
zh: { | zh: { | ||
my_label_year_position: | my_label_year_position: | ||
行 277: | 行 280: | ||
// | // | ||
this._adapters = (this._adapters || []); | this._adapters = (this._adapters || []); | ||
+ | |||
if (!this._adapters[insertId]) { | if (!this._adapters[insertId]) { | ||
this._adapters[insertId] = this._createAdapter(inputId, | this._adapters[insertId] = this._createAdapter(inputId, | ||
} | } | ||
- | var adapter = this._adapters[insertId]; | ||
var cal = this._cal; | var cal = this._cal; | ||
+ | |||
if (cal) { // | if (cal) { // | ||
cal.hide(); | cal.hide(); | ||
行 291: | 行 295: | ||
cal = (this._cal = this._createCalendar(insertId)); | cal = (this._cal = this._createCalendar(insertId)); | ||
} | } | ||
+ | |||
+ | this._place.focus(); | ||
// | // | ||
- | var val = adapter.getDate(); | + | var val = this._adapters[insertId].getDate(); |
var y = val[0], m = val[1], d = val[2]; | var y = val[0], m = val[1], d = val[2]; | ||
var shown = new Date(y, m - 1, d); | var shown = new Date(y, m - 1, d); | ||
- | // | ||
var pagedate = "", | var pagedate = "", | ||
+ | |||
if ((shown.getFullYear() == y && shown.getMonth() + 1 == m && shown.getDate() == d)) { | if ((shown.getFullYear() == y && shown.getMonth() + 1 == m && shown.getDate() == d)) { | ||
// | // | ||
行 306: | 行 312: | ||
shown = new Date(); | shown = new Date(); | ||
} | } | ||
+ | |||
cal.cfg.setProperty(" | cal.cfg.setProperty(" | ||
cal.cfg.setProperty(" | cal.cfg.setProperty(" | ||
行 312: | 行 319: | ||
this._showHolidays(shown); | this._showHolidays(shown); | ||
- | | + | |
// | // | ||
setTimeout(function() { | setTimeout(function() { | ||
YAHOO.util.Event.addListener(document, | YAHOO.util.Event.addListener(document, | ||
}, 1); | }, 1); | ||
- | | + | |
return true; | return true; | ||
}; | }; | ||
行 331: | 行 338: | ||
if (!monthId) { // | if (!monthId) { // | ||
- | var ymd = document.getElementById(inputId); | + | var input = document.getElementById(inputId); |
var delimiter = YahhoCal.format.delimiter; | var delimiter = YahhoCal.format.delimiter; | ||
+ | |||
adapter.getDate = function() { | adapter.getDate = function() { | ||
if (delimiter) { | if (delimiter) { | ||
- | return | + | return |
} else { | } else { | ||
- | var val = ymd.value; | + | var val = input.value; |
return [val.substr(0, | return [val.substr(0, | ||
} | } | ||
}; | }; | ||
+ | |||
adapter.setDate = function(y, m, d) { | adapter.setDate = function(y, m, d) { | ||
if (YahhoCal.format.padZero) { | if (YahhoCal.format.padZero) { | ||
行 346: | 行 355: | ||
d = (" | d = (" | ||
} | } | ||
- | ymd.value = y + delimiter + m + delimiter + d; | + | |
+ | input.value = y + delimiter + m + delimiter + d; | ||
}; | }; | ||
+ | |||
return adapter; | return adapter; | ||
} | } | ||
行 359: | 行 370: | ||
adapter.getDate = function() { return [ey.value, em.value, ed.value]; }; | adapter.getDate = function() { return [ey.value, em.value, ed.value]; }; | ||
adapter.setDate = function(y, m, d) { ey.value = y; em.value = m; ed.value = d; }; | adapter.setDate = function(y, m, d) { ey.value = y; em.value = m; ed.value = d; }; | ||
+ | |||
return adapter; | return adapter; | ||
} | } | ||
- | | + | |
// | // | ||
var getNumber = function(opt) { return (opt.value || opt.text).replace(/ | var getNumber = function(opt) { return (opt.value || opt.text).replace(/ | ||
行 373: | 行 385: | ||
} | } | ||
}; | }; | ||
+ | |||
adapter.getDate = function() { return [get(ey), get(em), get(ed)]; }; | adapter.getDate = function() { return [get(ey), get(em), get(ed)]; }; | ||
adapter.setDate = function(y, m, d) { set(ey, y); set(em, m); set(ed, d); }; | adapter.setDate = function(y, m, d) { set(ey, y); set(em, m); set(ed, d); }; | ||
+ | |||
return adapter; | return adapter; | ||
}; | }; | ||
行 382: | 行 396: | ||
YahhoCal._setStyle = function() { | YahhoCal._setStyle = function() { | ||
var css = ""; | var css = ""; | ||
+ | |||
for (var target in this.CAL_STYLE) { | for (var target in this.CAL_STYLE) { | ||
css += " | css += " | ||
- | css += " | + | css += " |
} | } | ||
行 398: | 行 413: | ||
*/ | */ | ||
YahhoCal._createCalendar = function(insertId) { | YahhoCal._createCalendar = function(insertId) { | ||
- | var yDom = YAHOO.util.Dom; | + | var yUtil = YAHOO.util, yDom = yUtil.Dom; // |
//YUI skinを適用 | //YUI skinを適用 | ||
行 405: | 行 420: | ||
// | // | ||
var place = (this._place = document.createElement(" | var place = (this._place = document.createElement(" | ||
+ | |||
if (this.isPopup) { | if (this.isPopup) { | ||
yDom.setStyle(place, | yDom.setStyle(place, | ||
yDom.setStyle(place, | yDom.setStyle(place, | ||
} | } | ||
+ | |||
yDom.insertBefore(place, | yDom.insertBefore(place, | ||
- | // | + | // |
var config = this.YUI_CAL_CONFIG[this.locale]; | var config = this.YUI_CAL_CONFIG[this.locale]; | ||
config.close = this.isPopup; | config.close = this.isPopup; | ||
config.hide_blank_weeks = true; | config.hide_blank_weeks = true; | ||
+ | |||
+ | // | ||
var cal = new YAHOO.widget.Calendar(place, | var cal = new YAHOO.widget.Calendar(place, | ||
行 421: | 行 440: | ||
var date = selectedDate[0][0]; | var date = selectedDate[0][0]; | ||
YahhoCal._adapters[YahhoCal._currentId].setDate(date[0], | YahhoCal._adapters[YahhoCal._currentId].setDate(date[0], | ||
+ | |||
if (YahhoCal.isPopup) { | if (YahhoCal.isPopup) { | ||
cal.hide(); | cal.hide(); | ||
行 433: | 行 453: | ||
// | // | ||
cal.hideEvent.subscribe(function() { | cal.hideEvent.subscribe(function() { | ||
- | | + | |
}); | }); | ||
- | | + | |
+ | // | ||
+ | (new yUtil.KeyListener(document, | ||
return cal; | return cal; | ||
}; | }; | ||
/** | /** | ||
- | | + | |
| | ||
+ | | ||
*/ | */ | ||
YahhoCal._showHolidays = function(target) { | YahhoCal._showHolidays = function(target) { | ||
- | if (!window.GCalHolidays) { //GCalHolidays.jsを読み込んでいない場合 | + | if (!window.GCalHolidays) { //GCalendar Holidaysを読み込んでいない場合 |
return; | return; | ||
} | } | ||
+ | |||
// | // | ||
GCalHolidays.get(this.setHolidays, | GCalHolidays.get(this.setHolidays, | ||
行 459: | 行 484: | ||
} | } | ||
- | var getEBCN = YAHOO.util.Dom.getElementsByClassName; | + | var getEBCN = YAHOO.util.Dom.getElementsByClassName; |
| | ||
// | // | ||
行 465: | 行 490: | ||
var table = getEBCN(" | var table = getEBCN(" | ||
var tbody = getEBCN(" | var tbody = getEBCN(" | ||
+ | |||
if (!table || !tbody) { | if (!table || !tbody) { | ||
return; | return; | ||
行 471: | 行 497: | ||
// | // | ||
var prefix = (YahhoCal.holidays.prefixes[calIdIndex] || "" | var prefix = (YahhoCal.holidays.prefixes[calIdIndex] || "" | ||
+ | |||
for (var i = 0, len = holidays.length; | for (var i = 0, len = holidays.length; | ||
var td = getEBCN(" | var td = getEBCN(" | ||
YAHOO.util.Dom.addClass(td, | YAHOO.util.Dom.addClass(td, | ||
+ | |||
if (td.title) { | if (td.title) { | ||
td.title += YahhoCal.holidays.delimiter; | td.title += YahhoCal.holidays.delimiter; | ||
} | } | ||
+ | |||
td.title += prefix + holidays[i].title; | td.title += prefix + holidays[i].title; | ||
} | } | ||
行 488: | 行 517: | ||
return; | return; | ||
} | } | ||
+ | |||
var xy = YAHOO.util.Event.getXY(clickedPoint); | var xy = YAHOO.util.Event.getXY(clickedPoint); | ||
var x = xy[0], y = xy[1]; | var x = xy[0], y = xy[1]; | ||
var r = YAHOO.util.Dom.getRegion(YahhoCal._cal.containerId); | var r = YAHOO.util.Dom.getRegion(YahhoCal._cal.containerId); | ||
+ | |||
if (x < r.left || x > r.right || y < r.top || y > r.bottom) { | if (x < r.left || x > r.right || y < r.top || y > r.bottom) { | ||
YahhoCal._cal.hide(); | YahhoCal._cal.hide(); | ||
行 502: | 行 533: | ||
*/ | */ | ||
YahhoCal.loadYUI = function(yuiBase, | YahhoCal.loadYUI = function(yuiBase, | ||
- | | + | yuiBase |
- | | + | |
- | } | + | |
- | + | ||
- | var options = { base: yuiBase, require: [" | + | |
//YUI Loaderをload | //YUI Loaderをload | ||
行 514: | 行 541: | ||
document.getElementsByTagName(" | document.getElementsByTagName(" | ||
- | //YUI Loaderがloadされるまで待つ | ||
var limit = 5000, interval = 50, time = 0; | var limit = 5000, interval = 50, time = 0; | ||
- | | + | |
- | if (window.YAHOO) { | + | |
+ | if (window.YAHOO) { //YUI Loaderがloadされたら | ||
clearInterval(intervalId); | clearInterval(intervalId); | ||
- | //YUI Calendarをload | + | |
- | (new YAHOO.util.YUILoader(options)).insert(); | + | (new YAHOO.util.YUILoader({ //YUI Calendarをload |
+ | base: yuiBase, | ||
+ | require: [" | ||
+ | onSuccess: callback || null | ||
+ | })).insert(); | ||
} else if ((time += interval) > limit) { // | } else if ((time += interval) > limit) { // | ||
clearInterval(intervalId); | clearInterval(intervalId); | ||
行 540: | 行 571: | ||
YahhoCal.setMinDate = function(y, m, d) { | YahhoCal.setMinDate = function(y, m, d) { | ||
var date = m + "/" | var date = m + "/" | ||
+ | |||
if (this._cal) { | if (this._cal) { | ||
this._cal.configMinDate(null, | this._cal.configMinDate(null, | ||
行 554: | 行 586: | ||
YahhoCal.setMaxDate = function(y, m, d) { | YahhoCal.setMaxDate = function(y, m, d) { | ||
var date = m + "/" | var date = m + "/" | ||
+ | |||
if (this._cal) { | if (this._cal) { | ||
this._cal.configMaxDate(null, | this._cal.configMaxDate(null, |
javascript/yahho-calendar.1273787320.txt.gz · 最終更新: 2010/05/14 06:48 by dgbadmin