jQuery datepicker
Goedemiddag allemaal,
Ik ben bezig met het integreren van een datepicker van de jQuery pagina zelf in te voegen op een bestaande webpagina. Nu is het probleem dat de div met alle gegevens voor de kalender als het ware nieteens word toegevoegd bij het laden van de pagina. Na het laden van de pagina en het klikken op het input veld word er helemaal niks getoond. De jQuery staat lokaal op:
De UI en css van jQuery die erbij horen heb ik ook lokaal staan:
Ik roep de datepicker op met:
En mijn input veld ziet er als volgt uit:
Alle lokale bestanden heb ik net opnieuw aangemaakt met de codes die gebruikt worden bij het voorbeeld op de site van jQuery. Overigens heeft de datepicker het wel eerder al eens gedaan.
Zou iemand hier een oplossing voor weten? Dan hoor ik het graag.
Met vriendelijke groet,
Mike Koopman
Edit: Code tag in het bericht aangepast
Ik ben bezig met het integreren van een datepicker van de jQuery pagina zelf in te voegen op een bestaande webpagina. Nu is het probleem dat de div met alle gegevens voor de kalender als het ware nieteens word toegevoegd bij het laden van de pagina. Na het laden van de pagina en het klikken op het input veld word er helemaal niks getoond. De jQuery staat lokaal op:
De UI en css van jQuery die erbij horen heb ik ook lokaal staan:
Code (php)
1
2
2
<script src="/js/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" />
Ik roep de datepicker op met:
En mijn input veld ziet er als volgt uit:
Alle lokale bestanden heb ik net opnieuw aangemaakt met de codes die gebruikt worden bij het voorbeeld op de site van jQuery. Overigens heeft de datepicker het wel eerder al eens gedaan.
Zou iemand hier een oplossing voor weten? Dan hoor ik het graag.
Met vriendelijke groet,
Mike Koopman
Edit: Code tag in het bericht aangepast
Gewijzigd op 26/09/2013 14:22:13 door Mike Koopman
Quote:
<script>
$(function() {
$( ".datepicker-in" ).datepicker();
});
</script>
$(function() {
$( ".datepicker-in" ).datepicker();
});
</script>
Moet denk ik gewoon
zijn.
Dat lost het probleem nog niet op er word nog steeds helemaal niks op de pagina getoond.
Datepicker is niet zomaar van jQuery, maar is van jQuery-ui.
http://jqueryui.com/
Die moet je ook laden.
Dus bv. zo
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
http://jqueryui.com/
Die moet je ook laden.
Dus bv. zo
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Gewijzigd op 26/09/2013 15:42:41 door Kris Peeters
Kris, dat doet hij ook.
Ik weet alleen niet of hij ze wel in de juiste volgorde heeft staan.
Mike, laad je wel eerst de jquery in en daarna pas de jquery-ui?
Code (php)
1
2
2
<script src="/js/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" />
Ik weet alleen niet of hij ze wel in de juiste volgorde heeft staan.
Mike, laad je wel eerst de jquery in en daarna pas de jquery-ui?
Kijk, als je simpelweg deze lijnen code hebt, werkt alles.
Je kan dit letterlijk copy/pasten in een leeg document.
Uiteraard raad ik aan dat je ook <!doctype>, <html> (en zo) invult.
Verder zoek je uit wie wie is; en vul je aan.
bv.
----------------------
>> Gewijzigd op 26/09/2013 14:22:13 door Mike Koopman
Ik veronderstel dat ik het al gelezen had (en niet ververst) vooraleer hij het vlug aangepast heeft, of zo.
(of ik heb er zelf over gekeken)
Je kan dit letterlijk copy/pasten in een leeg document.
Uiteraard raad ik aan dat je ook <!doctype>, <html> (en zo) invult.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" type="text/css" />
<script>
$(function() {
$( ".datepicker-in" ).datepicker();
});
</script>
<input type=text name="datum" value="" style="width:300px" class="datepicker-in">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" type="text/css" />
<script>
$(function() {
$( ".datepicker-in" ).datepicker();
});
</script>
<input type=text name="datum" value="" style="width:300px" class="datepicker-in">
Verder zoek je uit wie wie is; en vul je aan.
bv.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
ui-datepicker-div {
/* buitense div */
background-color: #e0e0e0;
}
.ui-datepicker-header {
/* hoofding */
background-color: #808080;
}
.ui-datepicker-calendar {
/* <table> */
background-color: #a0a0a0;
}
/* buitense div */
background-color: #e0e0e0;
}
.ui-datepicker-header {
/* hoofding */
background-color: #808080;
}
.ui-datepicker-calendar {
/* <table> */
background-color: #a0a0a0;
}
----------------------
Albert de Wit op 26/09/2013 16:04:40:
Kris, dat doet hij ook. ...
>> Gewijzigd op 26/09/2013 14:22:13 door Mike Koopman
Ik veronderstel dat ik het al gelezen had (en niet ververst) vooraleer hij het vlug aangepast heeft, of zo.
(of ik heb er zelf over gekeken)
Gewijzigd op 26/09/2013 16:47:17 door Kris Peeters
Ik heb in de tussentijd niks aangepast ;). In ieder geval bedankt voor het reageren op het bericht. Het probleem is opgelost om de functie $(".datepicker-in").datepicker() met de UI en de jquery bij elkaar te zetten en daarna alle andere javascript meuk. Sorry voor het late bericht ik was al weg en verder niks meer gelezen. Nogmaals bedankt voor de moeite.




