<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/yui/build/calendar/calendar-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://lightbox.on.coocan.jp/yui/cal.css" />
<script type="text/javascript">
document.body.className = document.body.className + " yui-skin-sam";
YAHOO.util.Event.onDOMReady(function(){
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
dialog,
calendar;
var showBtn = Dom.get("show");
Event.on(showBtn, "click", function() {
if (!dialog) {
Event.on(document, "click", function(e) {
var el = Event.getTarget(e);
var dialogEl = dialog.element;
if (el != dialogEl && !Dom.isAncestor(dialogEl, el) && el != showBtn && !Dom.isAncestor(showBtn, el)) {
dialog.hide();
}
});
function resetHandler() {
var selDates = calendar.getSelectedDates();
var resetDate;
if (selDates.length > 0) {
resetDate = selDates[0];
} else {
resetDate = calendar.today;
}
calendar.cfg.setProperty("pagedate", resetDate);
calendar.render();
}
function closeHandler() {
dialog.hide();
}
dialog = new YAHOO.widget.Dialog("container", {
visible:false,
context:["show", "tl", "bl"],
buttons:[ {text:"Reset", handler: resetHandler, isDefault:true}, {text:"Close", handler: closeHandler}],
draggable:false,
close:true
});
dialog.setHeader('\u65e5\u4ed8\u3092\u9078\u629e\u3057\u3066\u4e0b\u3055\u3044');
dialog.setBody('<div id="cal"></div>');
dialog.render(document.body);
// カレンダーが表示される時の初期処理
// ※ 現在の値でカレンダーを選択する
dialog.showEvent.subscribe(function() {
var str = document.getElementById("date").value;
var dt = new Date(str);
if ( !isNaN(dt) ) {
calendar.cfg.setProperty('selected', str);
calendar.cfg.setProperty('pagedate', dt, true);
calendar.render();
if (YAHOO.env.ua.ie) {
dialog.fireEvent("changeContent");
}
}
});
}
if (!calendar) {
calendar = new YAHOO.widget.Calendar("cal", {
iframe:false, // Turn iframe off, since container has iframe support.
hide_blank_weeks:true // Enable, to demonstrate how we handle changing height, using changeContent
});
calendar.cfg.setProperty("MDY_YEAR_POSITION", 1);
calendar.cfg.setProperty("MDY_MONTH_POSITION", 2);
calendar.cfg.setProperty("MDY_DAY_POSITION", 3);
calendar.cfg.setProperty("MY_YEAR_POSITION", 1);
calendar.cfg.setProperty("MY_MONTH_POSITION", 2);
// Date labels for Japanese locale
calendar.cfg.setProperty("MONTHS_SHORT", ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]);
calendar.cfg.setProperty("MONTHS_LONG", ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
calendar.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
calendar.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
calendar.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
calendar.cfg.setProperty("WEEKDAYS_LONG", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
// Month/Year label format for Japan
calendar.cfg.setProperty("MY_LABEL_YEAR_POSITION", 1);
calendar.cfg.setProperty("MY_LABEL_MONTH_POSITION", 2);
calendar.cfg.setProperty("MY_LABEL_YEAR_SUFFIX", "\u5E74");
calendar.cfg.setProperty("MY_LABEL_MONTH_SUFFIX", "");
calendar.render();
calendar.selectEvent.subscribe(function() {
if (calendar.getSelectedDates().length > 0) {
var selDate = calendar.getSelectedDates()[0];
// Pretty Date Output, using Calendar's Locale values: Friday, 8 February 2008
var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
var dStr = selDate.getDate() + "";
if ( dStr.length == 1 ) {
dStr = "0" + dStr;
}
var mStr = calendar.cfg.getProperty("MONTHS_SHORT")[selDate.getMonth()];
var yStr = selDate.getFullYear();
Dom.get("date").value = yStr+ "/" + mStr + "/" + dStr;
} else {
Dom.get("date").value = "";
}
dialog.hide();
});
calendar.renderEvent.subscribe(function() {
// Tell Dialog it's contents have changed, which allows
// container to redraw the underlay (for IE6/Safari2)
dialog.fireEvent("changeContent");
});
}
var seldate = calendar.getSelectedDates();
if (seldate.length > 0) {
calendar.cfg.setProperty("pagedate", seldate[0]);
calendar.render();
}
dialog.show();
});
});
</script>
<div class="box">
<div class="datefield">
<label for="date">Date: </label><input type="text" id="date" name="date" value="" /><button type="button" id="show" title="Show Calendar"><img src="http://lightbox.on.coocan.jp/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
