<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* Clear calendar's float, using dialog inbuilt form element */
#container .bd form {
clear:left;
}
/* Have calendar squeeze upto bd bounding box */
#container .bd {
padding:0;
}
#container .hd {
text-align:left;
}
/* Center buttons in the footer */
#container .ft .button-group {
text-align:center;
}
/* Prevent border-collapse:collapse from bleeding through in IE6, IE7 */
#container_c.yui-overlay-hidden table {
*display:none;
}
/* Remove calendar's border and set padding in ems instead of px, so we can specify an width in ems for the container */
#cal {
border:none;
padding:0.5em;
}
</style>
<button type="button" id="show" title="Show"><img src="http://developer.yahoo.com/yui/examples/calendar/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
<select id="selMonth" name="selMonth">
<option value="" selected> </option>
<option value="Jan">1</option>
<option value="Feb">2</option>
<option value="Mar">3</option>
<option value="Apr">4</option>
<option value="May">5</option>
<option value="Jun">6</option>
<option value="Jul">7</option>
<option value="Aug">8</option>
<option value="Sep">9</option>
<option value="Oct">10</option>
<option value="Nov">11</option>
<option value="Dec">12</option>
</select>
<select name="selDay" id="selDay">
<option value="" selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="selYear" id="selYear">
<option value="" selected> </option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<script type="text/javascript">
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) {
// Hide Calendar if we click anywhere in the document other than the calendar
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() {
// Reset the current calendar page to the select date, or
// to today if nothing is selected.
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("panel", {
visible:false,
height: "250px",
context:["show", "tl", "bl"],
buttons:[ {text:"Reset", handler: resetHandler, isDefault:true}, {text:"Close", handler: closeHandler}],
draggable:false,
close:true
});
dialog.setHeader('Pick A Date');
dialog.setBody('<div id="cal"></div>');
dialog.render(document.body);
dialog.showEvent.subscribe(function() {
if (YAHOO.env.ua.ie) {
dialog.fireEvent("changeContent");
}
});
}
if (!calendar) {
function updateCal() {
var selMonth = Dom.get("selMonth");
var selDay = Dom.get("selDay");
var selYear = Dom.get("selYear");
var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
var day = parseInt(selDay.options[selDay.selectedIndex].value);
var year = parseInt(selYear.options[selYear.selectedIndex].value);
if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
var date = month + "/" + day + "/" + year;
calendar.select(date);
calendar.cfg.setProperty("pagedate", month + "/" + year);
calendar.render();
}
}
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.selectEvent.subscribe(function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0], month = date[1], day = date[2];
var selMonth = Dom.get("selMonth");
var selDay = Dom.get("selDay");
var selYear = Dom.get("selYear");
selMonth.selectedIndex = month;
selDay.selectedIndex = day;
for (var y=0;y<selYear.options.length;y++) {
if (selYear.options[y].text == year) {
selYear.selectedIndex = y;
break;
}
}
dialog.hide();
});
calendar.render();
calendar.renderEvent.subscribe(function() {
dialog.fireEvent("changeContent");
});
}
dialog.show();
Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
});
});
</script>
|
