Scripts
Datum picker
Ik heb dit eigenlijk geschreven als reactie op het script van SanThe (http://www.phphulp.nl/php/scripts/1/611/). Hij gebruikt een simpele select om data te selecteren, maar op die manier wordt er geen rekening gehouden met schrikkeljaren en maandlengtes. Mijn scriptje zorgt voor een pop-up met daarin een kalendertje. Klik op een datum en het wordt weggeschreven naar het formulier.
datum-picker
[code]
-- index.php --
<html>
<head>
<link rel='stylesheet' href='style.css'>
<script>
function popup(pagina, titel)
{
window.open(pagina, titel, 'width=200, height=180, scrollbars=no')
}
</script>
</head>
<body>
<form name='datumform'>
<div id='datum'>
<p class='titel'>Datum: </p><input type='text' name='datum' disabled>
<a href='' onClick="popup('datum.php','test');" ><img src='cal.gif' ALT='open kalender'></a>
</div>
</form>
</body>
</html>
-- datum.php --
<html>
<head>
<link rel='stylesheet' href='datum.css'>
<title>selecteer een datum</title>
</head>
<body>
<?php
$minjaar=2000;
$maxjaar=2010;
$maanden=array("Januari","Februari","Maart","April","Mei","Juni","Juli","Augustus","September","Oktober","November","December");
$maand=$_GET['maand'];
$jaar=$_GET['jaar'];
if(empty($maand)) {
$maand=date('m');
}
if(empty($jaar)) {
$jaar=date('Y');
}
$dezemaand=$maanden[$maand-1];
$mk=mktime(0,0,0,$maand+1,0,$jaar);
$mk2=mktime(0,0,0,$maand,1,$jaar);
$lengte=strftime("%e",$mk);
$start =strftime("%w",$mk2);
$lengte=$lengte+1;
echo "
<table class='datumtabel' cellspacing=0 cellpadding=0>
<tr>
<td colspan=8 class='select'>
<form action='datum.php' method='GET'>
<select name='maand'>\n ";
for($i=0; $i<count($maanden); $i++) {
$b=$i+1;
echo "<option ";
if($maand==$b) {
echo "selected ";
}
echo "value=$b>".$maanden[$i]."</option>\n";
}
echo "</select>\n<select name='jaar'>\n";
for($i=$minjaar; $i<$maxjaar+1; $i++) {
echo "<option ";
if($i==$jaar) {
echo "selected ";
}
echo "value=$i>$i</option>\n";
}
echo "
<input type='submit' value='go'>
</form>
</td>
</tr>
<td colspan=7 class='info'>
<p class='kop'>$dezemaand - $jaar</p>
</td>
</tr>
<tr class='dagen'>
<td><p class='weekdag'> Zo </p></td>\n<td><p class='weekdag'>Ma</p></td>\n<td><p class='weekdag'> Di </p></td>\n<td><p class='weekdag'> Wo </p></td>\n<td><p class='weekdag'> Do </p></td>\n<td><p class='weekdag'> Vr </p></td>\n<td><p class='weekdag'> Za </p>\n</td>
</tr>\n
<tr class='data'>\n";
$dag=1;
for($i=1;$dag < $lengte; $i++) {
if($i > $start) {
echo "<td class='dag'><a href=\"javascript:window.opener.document.datumform.datum.value='$dag-$maand-$jaar'; window.close()\">$dag</a></td>\n";
$dag++;
}
else {
echo "<td class='leeg'> </td>\n";
}
$t++;
if($t==7) {
echo "<tr class='data'>\n";
$t=0;
}
}
if($t<7)
{
for($t;$t !== 7;$t++) {
echo "<td class='leeg'> </td>\n";
}}
?>
</body>
</html>
-- style.css --
#datum
{
border: 1px dotted gray;
padding: 4px;
width: 200px;
}
#datum input
{
border: 1px solid #333;
width: 100px;
font-family: arial;
font-size: 11px;
}
a:hover
{
border: 1px dotted gray;
}
p.titel
{
color: #333;
font-family: arial;
font-size: 11px;
display: inline;
padding-right: 15px;
}
-- datum.css --
table.datumtabel
{
border: 1px solid gray;
}
p.kop
{
color: black;
font-size: 13px;
font-family: arial;
text-align: center;
}
select, input
{
font-size: 11px;
font-color: gray;
font-family: arial;
}
p.weekdag
{
text-align: center;
color: green;
font-family: arial;
font-size: 11px;
}
a:link
{
color: black;
text-decoration: none;
font-size: 12px;
font-family: arial;
}
a:hover
{
color: #F33;
}
tr.data
{
border-bottom: 1px solid gray;
}
tr.data td
{
border-left: 1px solid gray;
}
tr.dagen
{
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}
tr.dagen td
{
border-left: 1px solid gray;
}
[/code]
Reacties
0