calendario datepicker pagina nueva con variables get

[andoencombi]

hola que tal amigos del foro, necesito su ayuda, resulta que tengo un calendario en el cual necesito que al dar clic en algun dia, mande la fecha por la url!!!!!

este es el codigo del calendario

Código PHP:

  <!--Librerias que ocupa el calendario-->
<link rel=stylesheet href="jquery.calendarPicker.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.calendarPicker.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
 
 
<div id="dsel1" style="width:240px"></div><!--Aqui aparecera el calendario-->
 
<span id="wtf"></span><!--cuando seleccionemos una fecha en el calendario aqui aparecera la fecha-->
 
<script type="text/javascript">
 
 
  var calendarPicker1 = $("#dsel1").calendarPicker({
    monthNames:["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
    dayNames: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
    //useWheel:true,
    //callbackDelay:500,
    //years:1,
    //months:3,
    //days:4,
    //showDayArrows:false,
    callback:function(cal) {
      $("#wtf").html("Selected date: " + cal.currentDate);
        $('#wtf').click(function() {
var theUrl='pagina.php?date='+cal.currentDate;
document.location.href = theUrl;
});
 
    }});
 
</script> 
  

el codigo jquery.calendarPicker.css

Código PHP:

  .calBox {
    background-color: #FFF;
  /*background-color: #928d81;*/
  padding: 2px;
  /*-moz-border-radius: 4px;*/
  text-align: center;
  color: white;
  font-family: Helvetica, sans-serif;
}
 
.calElement {
  margin: 1px;
  display: inline-block;
  overflow:hidden;
}
 
.calYear {
  font-size: 20px;
  /*border-bottom: 1px dashed #666;*/
  padding-bottom: 5px;
  margin-bottom: 5px;
  color:#FF3333;
  font-size:17px;
  font-weight:bold;
}
 
.calYear .calElement {
  /*border: 1px solid #999999;*/
}
 
.calMonth {
  /*border-bottom: 1px dashed #666;*/
  padding-bottom: 5px;
  margin-bottom: 5px;
  font-weight:bold;
}
 
.calMonth .calElement {
  font-size: 12px;
  /*border: 1px solid #999999;*/
  background-color:#CCC;
}
 
.calDay {
}
 
.calDay .calElement {
  font-size: 10px;
  /*border: 1px solid #999999;*/
  background-color:#CCC;
}
 
.calDay .calElement.prev {
  background: transparent url(images/prev.png) no-repeat 0 18px;
  width: 6px;
  height: 35px
}
 
.calDay .calElement.next {
  background: transparent url(images/next.png) no-repeat 0 18px;
  width: 6px;
  height: 35px;
}
 
span.calElement.next:hover, span.calElement.prev:hover {
  /*border: 1px solid #999999;*/
  cursor: pointer;
}
 
.calDay .calElement .dayNumber {
  font-size: 20px;
}
 
 
.calElement.selected {
  background-color: #FF3333;
  /*border: 1px solid #404040;
  -moz-border-radius: 3px;*/
}
 
span.calElement:hover {
  background-color: #404040;
  /*border: 1px solid #404040;
  -moz-border-radius: 3px;*/
  cursor: pointer;
}
 
.calElement.today {
  /*border: 1px solid #e0e000;
  -moz-border-radius: 3px*/
}
 
.calElement.selected2 {
  background-color: #FFF;
  /*border: 1px solid #404040;
  -moz-border-radius: 3px;
  color:#C30;*/
}
 
span2.calElement:hover {
  background-color: #FFF;
  /*border: 1px solid #404040;
  -moz-border-radius: 3px;*/
  cursor: pointer;
}