DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

Date Picker PHP + Javacript

08.17.2007

| 14844 views |

        // description of your code here

<?php $months = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); ?>

<table>
<tr>
<td valign="top">

<select id="selMonth" name="selMonth">
<?php for ($i = 0; $i < count($months); $i++) { ?>
<?php   $month = $months[$i]; ?>
<option value="<?php echo ($i + 1); ?>"><?php echo $month; ?></option>
<?php } ?>
</select>

</td><td valign="top">

<select name="selDay" id="selDay">
<?php for ($i = 1; $i <= 31; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>

</td><td valign="top">

<select name="selYear" id="selYear">
<option value="2006">2006</option>
<option value="2007" selected="selected">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>

</td><td valign="top">

<div id="cal1Container"></div>

</td></tr>
</table>

<script type="text/javascript">
	YAHOO.namespace("example.calendar");

	YAHOO.example.calendar.init = function() {
	
		function handleSelect(type,args,obj) {
			var dates = args[0]; 
			var date = dates[0];
			var year = date[0], month = date[1], day = date[2];

			var selMonth = document.getElementById("selMonth");
			var selDay = document.getElementById("selDay");
			var selYear = document.getElementById("selYear");
			
			selMonth.selectedIndex = month - 1;
			selDay.selectedIndex = day - 1;

			for (var y=0;y<selYear.options.length;y++) {
				if (selYear.options[y].text == year) {
					selYear.selectedIndex = y;
					break;
				}
			}
		}

		function updateCal() {
			var selMonth = document.getElementById("selMonth");
			var selDay = document.getElementById("selDay");
			var selYear = document.getElementById("selYear");
			
			var month = parseInt(selMonth.options[selMonth.selectedIndex].value);
			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;

				YAHOO.example.calendar.cal1.select(date);
				YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
				YAHOO.example.calendar.cal1.render();
			}
		}

		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", 
																	{ mindate:"1/1/2006",
																	  maxdate:"12/31/2008" });
		YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
		YAHOO.example.calendar.cal1.render();

		YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
	}

	YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
	
	// Initialize pulldowns
	var myDate = new Date();
	var month = myDate.getMonth();
	var day = myDate.getDate();
	var year = myDate.getFullYear();
	var selMonth = document.getElementById("selMonth");
	var selDay = document.getElementById("selDay");
	var selYear = document.getElementById("selYear");
	selMonth.selectedIndex = month;
	selDay.selectedIndex = day - 1;
	selYear.selectedIndex = year - 2006;
	
</script>

<div style="clear:both" ></div>

Tags: