Hi; I'm fooling around trying to make a very simple date picker for a form and would like to make it look like a one-month calendar page with buttons in each cell to show and on clicking, select the date. Essentially I want the set of buttons to work like radio buttons, but look like little square buttons with the date of the month on the button faces.
Here is what I have so far.
<html>
<head>
<title>Joe's handy dandy calendar control</title>
<STYLE TYPE="text/css">
.puny_yellow {
width: 20px;
height: 20px;
background-color:yellow;
border-color:efefef;
color: blue;
font-weight: bold;
font-family: arial, verdana, ms sans serif;
font-size: 8pt;}
.puny_red {
width: 20px;
height: 20px;
background-color:red;
border-color:efefef;
color: white;
font-weight: bold;
font-family: arial, verdana, ms sans serif;
font-size: 8pt;}
.puny_blue {
width: 20px;
height: 20px;
background-color:blue;
border-color:efefef;
color: white;
font-weight: bold;
font-family: arial, verdana, ms sans serif;
font-size: 8pt;}
table {border-collapse: collapse;}
TH {color: white; background-color: navy; font-family: Arial; font-size: 8pt; padding: 0px;}
TD {font-family: Arial; font-size: 8pt; padding: 0px;}
</STYLE>
</head>
<body style="font-family: Arial; font-size: 8pt">
<?
// POSTED VALUES
foreach($_POST as $postkey=>$postval) {$$postkey="$postval";}
//echo "$$postkey:$postval<br>";} //DEBUG
// END POSTED VALUES
// Convert posted date string into time string
if(isset($raw_date) and $raw_date!="") {
$raw_time=strtotime($raw_date);
$datename="Selected date";
} else {
$raw_time=strtotime(date('Y-n-j'));
$datename="Default date (today)";}
// END Convert posted date string into time string
//calendar form based on picked date
// Date formatted/parsed for various purposes
$firstday=date('n/1/Y',$raw_time);
$picked_date=date('Y-n-j',$raw_time);
$picked_comppart=date('Y-n-',$raw_time); // used for comparison and creating select date string buttons
$picked_mo_yr=date('Y-n', $raw_time);
$picked_topbar=date('F Y', $raw_time);
$picked_month_length=date('t', $raw_time);
$picked_month=date('n', $raw_time); //month without leading zero
$picked_year=date('Y', $raw_time);
$raw_time_firstday=strtotime($firstday);
$picked_month_startday=date('N', $raw_time_firstday); //numeric value of the day of week 0=sunday 6=saturday
$current_compstring=date('Y-n-j'); // used for comparison if it is TODAY
$spacecounter=(1-$picked_month_startday); //starting point for the calendar date cells
echo "$datename: $picked_date<br>"; // show the default date or the date that was picked
// figure out previous month and next month
if($picked_month=="1") {
$prev_yr=$picked_year-1; $prev_month="$prev_yr-12-1";
} else {
$prev_mo=$picked_month-1; $prev_month="$picked_year-$prev_mo-1";}
if($picked_month=="12") {
$next_yr=$picked_year+1; $next_month="$next_yr-1-1";
} else {
$next_mo=$picked_month+1; $next_month="$picked_year-$next_mo-1";}
echo "<br>";
// end figure out previous month and next month
//a one month calendar control
echo "<table>";
echo "<tr><th><form method=\"POST\" action=\"xcal6.php\" target=\"_self\">
<input type=\"hidden\" name=\"raw_date\" value=\"$prev_month\">
<input type=\"submit\" value=\"<<\" class=\"puny_red\">
</th></form><th colspan=5>$picked_topbar</th><th><form method=\"POST\" action=\"xcal6.php\" target=\"_self\">
<input type=\"hidden\" name=\"raw_date\" value=\"$next_month\">
<input type=\"submit\" value=\">>\" class=\"puny_red\">
</th></form></tr>";
echo "<form method=\"POST\" action=\"xcal6.php\" target=\"_self\">";
echo "<tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr>";
$weeks=ceil($picked_month_length/7); //rounds upwards
$week=0; $wkday=0; //start the first week
for($week; $week <= $weeks; $week++)
{echo "<tr>";
for($wkday; $wkday<=6; $wkday++)
{
$compstring="$picked_comppart$spacecounter";
if ($spacecounter < 1 ) {echo "<td align=center></td>";}
elseif ($spacecounter > $picked_month_length) {echo "<td align=center></td>";}
elseif ($compstring==$current_compstring) {echo "<td align=right>
<input type=\"hidden\" name=\"raw_date\" value=\"$picked_comppart$spacecounter\">
<input type=\"button\" value=\"$spacecounter\" class=\"puny_red\">
</td>";}
elseif ($compstring==$picked_date) {echo "<td align=right>
<input type=\"hidden\" name=\"raw_date\" value=\"$picked_comppart$spacecounter\">
<input type=\"button\" value=\"$spacecounter\" class=\"puny_blue\">
</td>";}
else {echo "<td>
<input type=\"hidden\" name=\"raw_date\" value=\"$picked_comppart$spacecounter\">
<input type=\"button\" value=\"$spacecounter\" class=\"puny_yellow\">
</td>";} // WEEKDAY SPACES
$spacecounter++;
}
echo "</tr>";
$wkday=0; //resets the row counter
}
echo "</table>";
//END calendar form based on picked date
echo "<input type=\"submit\" value=\"Save the date I clicked.\"></form>";
?>
</body></html>As you see, when you hit the "Save the date" button, it only submits the very last value that would have been created in the process of creating the calendar page.