Datepicker soll Seite refreshen
Wenn ich nur mal echt Ahnung von Javascript hätte...
Dann wäre ich in der Lage, mit dem Standard-Datepicker von JQueryUI eine Webseite oder eines deren DIVs mit onchange und reload() zu refreshen, sobald der Datepicker ein (neues) Datum übergibt, wobei in diesem DIV dann per PHP eine Datenbank abgefragt werden soll, ob Daten zu einem bestimmten Datum vorliegen.
Aber erstens find ich nichts wie und wo ich onchange() und reload() zu verwenden habe UND wie ich das Datum aus dem Datepicker in meine SQL-Abfrage per PHP übergeben muß.
Wer mag mir helfen?
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/jquery-ui.js"></script>
<style>
.calendar {
position: absolute;
width: 280px;
left: 50%;
top: 50%;
margin: -145px 0px 0px -140px;
background: #123456;
border:2px solid black;
border-radius: 4px;
overflow: hidden;
}
.ui-datepicker-header {
height: 50px;
line-height: 50px;
color: #654321;
background: #987456;
margin-bottom: 10px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
width: 20px;
height: 20px;
text-indent: 9999px;
border: 2px solid white;
border-radius: 100%;
cursor: pointer;
overflow: hidden;
margin-top: 12px;
}
.ui-datepicker-prev {
float: left;
margin-left: 12px;
background:black;
}
.ui-datepicker-prev:after {
transform: rotate(45deg);
margin: -43px 0px 0px 8px;
}
.ui-datepicker-next {
float: right;
margin-right: 12px;
background:black;
}
.ui-datepicker-next:after {
transform: rotate(-135deg);
margin: -43px 0px 0px 6px;
}
.ui-datepicker-prev:after,
.ui-datepicker-next:after {
content: '';
position: absolute;
display: block;
width: 4px;
height: 4px;
border-left: 2px solid green;
border-bottom: 2px solid green;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after {
border-color: orange;
}
.ui-datepicker-title {
text-align: center;
font-weight:900;
color:black;
}
.ui-datepicker-calendar {
width: 100%;
text-align: center;
}
.ui-datepicker-calendar thead tr th span {
display: block;
width: 40px;
color:white;
margin-bottom: 5px;
font-size: 13px;
}
.ui-state-default {
display: block;
text-decoration: none;
color: red;
line-height: 40px;
font-size: 12px;
}
.ui-state-default:hover {
background:yellow;
}
.ui-state-highlight {
color: blue;
}
.ui-state-active {
color: green;
font-weight:900;
}
</style>
<div id="datepicker" class="calendar"></div>
<script>
$(function() {
$( "#datepicker" ).datepicker({ firstDay: 1});
});</script>