Jquery - Datepicker
Het gaat om deze inputs:
Aankomstdatum (dd-mm-jjjj): <input type='text' id='datepicker1' size='20' name='aankomstdatum'>
Vertrekdatum (dd-mm-jjjj): <input type='text' id='datepicker2' size='20' name='vertrekdatum'>
Ik heb jquery UI al gedownload en ik heb dit tussen de head tags op mijn website staan:
<link type="text/css" href="css/themename/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
Weet iemand hoe ik dit moet maken?
Gewijzigd op 09/06/2011 15:58:40 door Stef Jager
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
bron: http://jqueryui.com/demos/datepicker/
http://www.eyecon.ro/datepicker/
Helpt je vast verder!
In jouw geval zou dit moeten werken.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
$(document).ready(function() {
$(function() {
$( "#datepicker1" ).datepicker();
});
$(function() {
$( "#datepicker2" ).datepicker();
});
});
</script>
$(document).ready(function() {
$(function() {
$( "#datepicker1" ).datepicker();
});
$(function() {
$( "#datepicker2" ).datepicker();
});
});
</script>
Gewijzigd op 09/06/2011 16:06:07 door Johan van der Molen
Verder zou het me praktischer lijken om alle velden waar een datepicker op moet komen dezelfde class te geven, bijvoorbeeld de class 'datum'.
Dan kun je met de CSS selector .datum de datepicker op alles toepassen en hoef je dat niet bij alle velden los te doen.
<!DOCTYPE html>
<html>
<head>
<title>***</title>
<style type='text/css'>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
position: absolute;
}
input, textarea {
position: absolute;
left: 225px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
background-color: white;
border: thin solid #4B6631;
resize:none;
}
.after {
position: absolute;
left: 250px;
}
form {
background-color:#dbe8ca;
height: 750px;
width: 500px;
padding-left: 25px;
}
hr {
position: relative;
left:-25px;
width: 525px;
}
</style>
<link type="text/css" href="css/themename/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script>
$(document).ready(function() {
$(function() {
$( "#datepicker1" ).datepicker();
});
$(function() {
$( "#datepicker2" ).datepicker();
});
});
</script>
</head>
<body>
<form method='post'>
<hr><br><b>NAW gegevens</b><br><br>
Naam: <input type='text' size='30'name='naam'><br><br>
Adres: <input type='text' size='30'name='adres'><br><br>
postcode: <input type='text' size='10' name='post code'><br><br>
Plaats: <input type='text' name='plaats' size='30'><br><br>
Telefoon: <input type='text' size='30' name='telefoon'><br><br>
E-mailadres: <input type='text' size='30' name='email'><br><br><hr><br>
<b>Reserveringsgegevens</b><br><br>
U komt met: <input type='radio' name='met' value='caravan'><span class='after'>Caravan</span><br><br>
<input type='radio' name='met' value='tent'><span class='after'> Tent</span><br><br>
<input type='radio' name='met' value='camper'><span class='after'> Camper</span><br><br>
Aantal volwassenen: <input type='text' size='10' name='aantalvolwassenen'><br><br>
Aantal kinderen (vanaf 2 jaar): <input type='text' size='10' name='aantalkinderen'><br><br>
Komt u met een auto (gratis): <input type='checkbox' value='ja' name='metauto'><span class='after'> Ja</span><br><br>
Neemt u een hond mee: <input type='checkbox' value='ja' name='methond'><span class='after'> Ja</span><br><br>
Heeft u een extra bijzet tent: <input type='checkbox' value='ja' name='bijzettent'><span class='after'> Ja</span><br><br>
Aankomstdatum (dd-mm-jjjj): <input type='text' size='20' name='aankomstdatum'><br><br>
Vertrekdatum (dd-mm-jjjj): <input type='text' size='20' name='vertrekdatum'><br><br><hr><br>
Totale kosten: <input type='text' readonly name='totaal'><br><br>
Eventuele opmerkingen:
<textarea name="eventueleopmerkingen" cols="40" rows="5"></textarea><br><br><br><br><br><br><br>
<div id='submit'><input type='submit' value='Verzenden'></div>
</form>
</body>
</html>
Gewijzigd op 09/06/2011 16:45:36 door Stef Jager
Code (php)
1
class="datepicker"
en gebruik dan het volgende javascript:
Code (php)
1
2
3
2
3
$(document).ready(function() {
$(".datepicker").datepicker();
});
$(".datepicker").datepicker();
});
Gewijzigd op 09/06/2011 16:14:30 door Vincent Huisman
je gebruikt al
Code (php)
1
2
3
2
3
$(document).ready(function() {
//
});
//
});
En $(function()) is een equivalent daarvan :-)
Gewijzigd op 09/06/2011 16:31:08 door - Ariën -
<script>
$(document).ready(function(){
$(".datepicker").datepicker();
});
</script>
Hiermee lukt het nog steeds niet.
Gewijzigd op 09/06/2011 16:34:32 door Stef Jager
Code (php)
1
2
2
var mutliply = function (a, b) { return a * b; }
multiply(2,3); // 6
multiply(2,3); // 6
Dus je geeft hier eigenlijk gewoon een functie als argument mee:
Code (php)
1
2
3
2
3
$(document).ready(function() {
// a * b
});
// a * b
});
Die functie, dus a * b, wordt uitgevoerd zodra de pagina is geladen (daar zorgt die ready() functie voor, die onthoudt welke functies allemaal aangeroepen moeten worden wanneer de pagina klaar is met laden)
Dus in totaal:
Code (php)
1
2
3
2
3
$(document).ready(function() {
$(".datepicker").datepicker();
});
$(".datepicker").datepicker();
});
Fout: jQuery is not defined
Bronbestand: *******/js/jquery-ui-1.8.13.custom.min.js
Regel: 17
Fout: $ is not defined
Bronbestand: *******/reserveren.html
Regel: 44
Heb je een voorbeeld online staan?
Erik van de Locht op 09/06/2011 16:07:40:
Johan: Waarom twee maal $(function()) gebruiken?
Verder zou het me praktischer lijken om alle velden waar een datepicker op moet komen dezelfde class te geven, bijvoorbeeld de class 'datum'.
Dan kun je met de CSS selector .datum de datepicker op alles toepassen en hoef je dat niet bij alle velden los te doen.
Verder zou het me praktischer lijken om alle velden waar een datepicker op moet komen dezelfde class te geven, bijvoorbeeld de class 'datum'.
Dan kun je met de CSS selector .datum de datepicker op alles toepassen en hoef je dat niet bij alle velden los te doen.
Je hebt gelijk heb wat code bij elkaar gecopy paste my fault!
Er had helemaal geen $(function()) nodig geweest achteraf gezien!
In combinatie met $(document).ready(function().
Toch bedankt voor het opmerken!
Maar even over het onderwerp heb je een voorbeeld van je code momenteel?
Gewijzigd op 09/06/2011 18:19:30 door Johan van der Molen
Hier is een online voorbeeld van de code, het gaat om de aankomst- en vertrekdatum.
http://jager-web.nl/depeperkampp/reserveren.html
Bevat in ieder geval geen jQuery.
Enigste fout die ik zou snel kan vinden.
Gewijzigd op 09/06/2011 20:28:30 door Johan van der Molen
Als je daar je jQuery-script inzet (desnoods even downloaden) dan moet het wel werken.