jQuery datepicker

Door Mike Koopman op 26-09-2013 14:21 gewijzigd op 26-09-2013 14:22

1.869 views

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:

<script src="/js/jquery-1.9.1.js" type="text/javascript"></script>

De UI en css van jQuery die erbij horen heb ik ook lokaal staan:

<script src="/js/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css" />

Ik roep de datepicker op met:

<script>
	$(function() {
	$( ".datepicker-in" ).datepicker();
	});
	</script>

En mijn input veld ziet er als volgt uit:

<input type=text name="datum" value="" style="width:300px" class="datepicker-in">

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

Albert de Wit

26-09-2013 14:30

<script>
$(function() {
$( ".datepicker-in" ).datepicker();
});
</script>

Moet denk ik gewoon


<script>
    $(".datepicker-in").datepicker();
</script>

zijn.

Mike Koopman

26-09-2013 14:31

Dat lost het probleem nog niet op er word nog steeds helemaal niks op de pagina getoond.

Kris Peeters

26-09-2013 15:28 gewijzigd op 26-09-2013 15:42

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>

Albert de Wit

26-09-2013 16:04

Kris, dat doet hij ook.

<script src="/js/jquery-ui.js" type="text/javascript"></script>
<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?

Kris Peeters

26-09-2013 16:13 gewijzigd op 26-09-2013 16:47

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.


<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">

Verder zoek je uit wie wie is; en vul je aan.
bv.


ui-datepicker-div {
  /* 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)

Mike Koopman

27-09-2013 00:21

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.

Reageren

Inloggen om te reageren