Datepicker veranderen door eigen kalender
Op een site heb ik een formulier met daarin een datepicker.
Nu heb ik een eigen kalender die ik graag wil vervangen voor de datepicker, omdat ik in mijn eigen kalender dagen open en dicht kan zetten via een admin site.
Kalender en formulier staan onder twee aparte mappen op de server.
Ik heb het volgende al voor elkaar gekregen, de kalender is clickable.
De dagen die ik dicht heb gezet kan je niet aanklikken, alleen de dagen die nog vrij zijn.
Ik denk dat ik ook nog wel scripts moet laten zien maar weet niet zo goed welke dat moeten zijn, aangezien het uit veel pagina's bestaat.
Hoop dat iemand me op weg kan helpen.
alstublieft. ;)
Bart V B op 09/01/2014 15:18:18:
Die wil die dus vervangen door zijn huidige kalender. Alleen geen idee wat ie dan moet zijn.
Dacht dat hij bedoelde internationaal. (Nederlands)
Misschien dat de TS dan wat relevante code kan posten?
dit is het formulier waar ik de datepicker nu heb.
<DIV class=fb-input-date><INPUT id=item7_date_1 class=datepicker name=datum data-hint="" required> </DIV>
Met de volgende code maak ik de kalender clickable. rood en oranje staan voor de dagen die ik heb afgeboekt in admin, hier kan je dan niet op klikken.
function activate_dates(){
var dateStart=document.id('date');
$$('li.clickable').each(function(el){
if(!el.hasClass('oranje'))
if(!el.hasClass('rood'))
{
el.addEvent('click',function(){
dateStart.value = this.id;
}).setStyle('cursor','pointer');
}
})
}
Volgens mij moet ik verwijzen naar het js bestand die ik zelf heb van me kalender ipv die van de datepicker, maar geen idee hoe of waar ik dat moet doen.
Hoop dat het een beetje duidelijk is.
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$("#calendar").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: function(d){
ymd = $.datepicker.formatDate('yy-mm-dd', d);
if ($.inArray(ymd, unavailableDates) == -1) {
return [true, "", ""];
}
else {
return [false, "disabled", "Geboekt"];
}
}
});
dateFormat: 'dd-mm-yy',
minDate: 1,
beforeShowDay: function(d){
ymd = $.datepicker.formatDate('yy-mm-dd', d);
if ($.inArray(ymd, unavailableDates) == -1) {
return [true, "", ""];
}
else {
return [false, "disabled", "Geboekt"];
}
}
});
Dan is het een kwestie de array met niet beschikbare datums met php te vullen
Gewijzigd op 09/01/2014 17:38:01 door Ger van Steenderen
Het moet toch mogelijk zijn om die kalender op dezelfde plek te krijgen als de datepicker, heb al van alles geprobeerd, het lukt maar niet.
Iemand nog ideeen?
Code (html)
1
<input type="tekst" id="datepicker" name="startdate">
Je zal dat gedeelte moeten vervangen door hetgeen jij in je kalender hebt staan.
En dan bedoel ik het gedeelte waarmee je de html voor de kalender genereert.
$the_file="ac-includes/cal.inc.php";
En hoe verwijs ik er dan naar, want er kan vast geen link in de regel hieronder
<input type="tekst" id="datepicker" name="startdate">
Eigenlijk vind ik de optie van Ger nog niet zo slecht.
Dat je de admin wilt gebruiken lijkt me geen excuus. Ik neem tenminste aan dat deze admin datums opslaat in je database en deze kun je dus ook ophalen en gebruiken in je huidige datepicker.
Dan combineer je dus de scripts die je nu al gebruikt.