jQuery datepicker op nieuwe elementen
Helaas werkt het daar niet omdat de addon niet ingeladen kan worden... maar je hebt wel alle code bij elkaar.
De datepicker doet precies wat het moet doen.
De +-knop doet ook precies wat het moet doen.
Maar de datepicker doet het niet op de <inputs> die zijn aangemaakt met de +-knop.
Dus ik kan alleen in de eerste (bovenste) input gebruiken met de datepicker.
Hoe zorg ik er voor dat het .datepicker-javascript ook uitgevoerd wordt op de elementen die NA de body-on-load zijn gemaakt?
Quote:
Helaas werkt het daar niet omdat de addon niet ingeladen kan worden...
Dat kan wel. Allereerst ben je bij 'Choose Framework' vergeten jQuery te selecteren. Vervolgens kun je de datepicker van jQuery UI gebruiken door het checkboxje aan te vinken van jQuery UI.
Als je niet de datepicker van jQ UI gebruikt, wat ik niet heel slim vind, dan kun je onder 'Add Resources' het JS file van jou datepicker plakken en inladen.
Maar jou probleem komt hierdoor:
jQuery's selector engine (sizzle) maakt gebruik van de relatief nieuwe document.querySelectorAll() functie om elementen op te halen. Het nadeel hiervan is dat het een NodeList is en meer niet. Als ze nog gebruik maakte van document.getElementsBy* functies dan krijg een live NodeList.
Wat houdt dat nou in in de praktijk?
Op regel 2 van je script selecteer je alle .datepicker elementen uit de DOM en je geeft ze een datepicker. Maar als je nu na die code nog een aantal .datepicker elementen toevoegt wordt die datepicker niet aan die elementen gegeven.
Stel je gebruikt een Live NodeList dan werkt het wel, aangezien die doorheeft dat er een element is toegevoegd en gebruikt die dan.
Hoe moet je dit dan oplossen?
Er is eigenlijk maar 1 mogelijk voor en dat is om de datepicker functie elke keer als je een element hebt opnieuw aan dat element te geven: http://jsfiddle.net/cyFK2/9/ (i.p.v. de onbekende datepicker gebruikt ik hier even als test de val functie)
Om je code dan wat beter te maken zou je alle opties in een variabele kunnen opslaan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var datepickerOptions = {
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
timeFormat: "h:mm:ss"
};
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
timeFormat: "h:mm:ss"
};
Zo hoef je die niet telkens meer toe te voegen en je kan dan gewoon dit gebruiken:
Code (php)
1
$('.datepicker').datetimepicker(datepickerOptions);
Nog wat andere tips:
- Maak formulieren niet op in tabellen
- Gebruikt 1 document.ready ($(function() { ... }) om je code en niet meerdere
- gebruik single quotes (') in JS en dubbele (") in HTML, hierdoor hoef je niet te escapen
Daarom voeg ik (alleen bij "" in JS een \ toe. Niet netjes, maar netter kreeg ik het niet makkelijk).
Ik gebruik de UI van jQuery. Nadat ik hem op mijn Fiddle aanzette werkte het wel.
Jouw code http://jsfiddle.net/cyFK2/9/ gaf geen datepicker (ook niet bij de eerste).
Succes!
Hoe krijg ik dan een live-node-list?
document.getElementsByClass("datepicker") is toch niet overal ondersteund etc?
Hoe krijg ik dan een live-node-list?
Ik denk dat ik het gewoon in een onhandige functie zet die ik gewoon heel vaak ga uitvoeren (ook al is dat misschien niet nodig).
Instellingen in een variabelen is wel leuk, maar waarom informatie eerst in een var zetten om het daarna maar 1x te echoén?
Het werkt inmiddels wel: http://jsfiddle.net/cyFK2/10/
Quote:
Instellingen in een variabelen is wel leuk, maar waarom informatie eerst in een var zetten om het daarna maar 1x te echoén?
Allereerst echo je niks en ten tweede heb je het 2 keer nodig, vandaar dat je het ook in een var stopt.
Ik echo deze code met PHP. Want ik wil wat variabelen bewerken (vandaar die $datum erin ;)) en nog wat ongein.
Ik heb 1 formulier (html, als php-string) en gebruik dat op 4 manieren. Dit is (voor mij) echt makkelijker. Zeker aangezien het een gesloten modus is voor een pagina die hooguit 2 mensen gaan zien.