Jquery - Datepicker

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Next-level Java Developer functie, veel verantwoor

Bedrijfsomschrijving Mobile Development en Ops Engineering gaan hand in hand bij deze organisatie dat een hoog verantwoordelijkheidsgevoel draagt. Als organisatie ontwikkelt zij dan ook veelal mobiele applicaties ter inspiratie en ondersteuning van belangrijke sectoren in Nederland. Met het technische team van gepassioneerde developers en engineers voeren ze dagelijks veelal diverse, inspirerende en complexe werkzaamheden uit waarbij zij als Java ontwikkelaar interessante software realiseert. Door gebruik van innovatieve software en de nieuwste platformen binnen de sector is deze klant dan ook zeker als vooruitstrevend te betitelen waar zijn enorm veel waarde aan hecht. Functieomschrijving Je werkt aan innovatieve producten binnen een

Bekijk vacature »

Stef Jager

Stef Jager

09/06/2011 15:58:10
Quote Anchor link
Ik ben bezig met een boekingssysteem voor een website. Hiervoor wil ik nu een datepicker met jquery maken. Ik heb al veel geprobeerd, maar ik krijg het maar niet voor elkaar.

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
 
PHP hulp

PHP hulp

05/12/2020 03:52:13
 
Vincent Huisman

Vincent Huisman

09/06/2011 16:00:07
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 -->

bron: http://jqueryui.com/demos/datepicker/
 
Johan van der Molen

Johan van der Molen

09/06/2011 16:00:19
Quote Anchor link
Lees dit eens door.

http://www.eyecon.ro/datepicker/

Helpt je vast verder!

In jouw geval zou dit moeten werken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<script>
 $(document).ready(function() {
    $(function() {
        $( "#datepicker1" ).datepicker();
    });
    $(function() {
        $( "#datepicker2" ).datepicker();
    });
 });
</script>
Gewijzigd op 09/06/2011 16:06:07 door Johan van der Molen
 
Erik van de Locht

Erik van de Locht

09/06/2011 16:07:40
Quote Anchor link
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.
 
Stef Jager

Stef Jager

09/06/2011 16:12:18
Quote Anchor link
Het werkt nog steeds niet, dit is mijn voledige script:

<!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
 
Vincent Huisman

Vincent Huisman

09/06/2011 16:14:16
Quote Anchor link
geef je inputs de volgende class mee:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
class="datepicker"


en gebruik dan het volgende javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).ready(function() {
    $(".datepicker").datepicker();
});
Gewijzigd op 09/06/2011 16:14:30 door Vincent Huisman
 
Stef Jager

Stef Jager

09/06/2011 16:16:58
Quote Anchor link
@Vincent het werkt nog steeds niet
 
- Ariën -
Beheerder

- Ariën -

09/06/2011 16:27:33
Quote Anchor link
Waarom gebruik je steeds: $(function())?

je gebruikt al
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).ready(function() {
//
});

En $(function()) is een equivalent daarvan :-)
Gewijzigd op 09/06/2011 16:31:08 door - Ariën -
 
Stef Jager

Stef Jager

09/06/2011 16:31:51
Quote Anchor link
@Aar bedoel je zo:

<script>
$(document).ready(function(){
$(".datepicker").datepicker();
});
</script>

Hiermee lukt het nog steeds niet.
Gewijzigd op 09/06/2011 16:34:32 door Stef Jager
 
- Ariën -
Beheerder

- Ariën -

09/06/2011 16:34:10
Quote Anchor link
wat zegt je foutconsole van Firefox?
 
Jelmer -

Jelmer -

09/06/2011 16:35:32
Quote Anchor link
function is niet een functie, maar een keyword waarmee je een functie maakt. Zo werken functies in Javascript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
var mutliply = function (a, b) { return a * b; }
multiply(2,3); // 6


Dus je geeft hier eigenlijk gewoon een functie als argument mee:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).ready(function() {
    // 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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$(document).ready(function() {
    $(".datepicker").datepicker();
});
 
Stef Jager

Stef Jager

09/06/2011 16:36:54
Quote Anchor link
Hij zegt:

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
 
- Ariën -
Beheerder

- Ariën -

09/06/2011 16:39:22
Quote Anchor link
Ik vermoed dat het pad naar jQuery niet klopt.
 
Stef Jager

Stef Jager

09/06/2011 16:44:47
Quote Anchor link
Het pad was inderdaad fout, ik heb dat opgelost, maar nu werkt het nog steeds niet.
 
- Ariën -
Beheerder

- Ariën -

09/06/2011 16:45:39
Quote Anchor link
En wat zegt je error console nu? Hetzelfde?
Heb je een voorbeeld online staan?
 
Joakim Broden

Joakim Broden

09/06/2011 18:03:57
Quote Anchor link
ALs je een online voorbeeld hebt kunnen we veel meer.
 
Johan van der Molen

Johan van der Molen

09/06/2011 18:17:09
Quote Anchor link
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.


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
 
Stef Jager

Stef Jager

09/06/2011 19:48:09
Quote Anchor link
De foutconsole zegt nog steeds hetzelfde:

Hier is een online voorbeeld van de code, het gaat om de aankomst- en vertrekdatum.

http://jager-web.nl/depeperkampp/reserveren.html
 
Johan van der Molen

Johan van der Molen

09/06/2011 20:25:10
Quote Anchor link
Je jQuery-1.4.4 link werkt niet.

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
 
- Ariën -
Beheerder

- Ariën -

09/06/2011 21:04:05
Quote Anchor link
Jup, er staat HTML-inhoud in, wat niet hoort.
Als je daar je jQuery-script inzet (desnoods even downloaden) dan moet het wel werken.
 
Stef Jager

Stef Jager

10/06/2011 16:11:02
Quote Anchor link
bedankt allemaal, het is gelukt
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.