Planning met tijden
Ik ben bezig met een planning voor klanten.
Dit houd in dat ze zelf mij agenda kunnen in plannen. Nu loop ik ergens tegen aan.
Ik heb al een popup agenda maar wilde graag hebbem dat wannneer er een datum in de text veld verschijnt, dat dan een inzichtbaar div opent met tijden die nog beschikbaar zijn.
Nu is mijn vraag hoe maar ik een veld zichtbaar wanneer een text veld is ingevuld.
Ik hoop dat jullie mij kunnen helpen.
Bedabkt alvast..
https://www.w3schools.com/jsref/event_onblur.asph
Voorbeeld : onblur() maak div zichtbaar
Gewijzigd op 09/07/2017 18:47:21 door Adoptive Solution
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
function openExtra(){
document.getElementById('Tijdplanning').style.display = 'inline-block';
}
</script>
</head>
<body>
<form method="post">
<p>Datum <input type="text" id="datepicker" readonly onChange="openExtra(this.value);"></p>
<div id="Tijdplanning"> Werkt dit wel ?</div>
</form>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
function openExtra(){
document.getElementById('Tijdplanning').style.display = 'inline-block';
}
</script>
</head>
<body>
<form method="post">
<p>Datum <input type="text" id="datepicker" readonly onChange="openExtra(this.value);"></p>
<div id="Tijdplanning"> Werkt dit wel ?</div>
</form>
</body>
</html>
Maar nu zit ik nog met iets.
Wanneer iemand de datum heeft geprikt dan komen de tijden te voorschijn.
Alleen nu wilde ik ook laten controleren of het nog beschikbaar is ja of nee.
Bedankt voor jullie hulp !
Gewijzigd op 11/07/2017 18:51:02 door Guillaume Storimans
hier is een voorbeeld van wat je wilt bereiken.
Wat betreft de andere vragen zul je iets duidelijker moeten zijn.
Wat betreft de andere vraag..
Wanneer iemand een datum kiest. Komt het stukje div tevoorschijn. Nu wilde ik daar tijden in zetten bijv.
09:00-10:00
10:00-11:00
Enz
En nu wilde ik laten controleren of de tijden nog beschikbaar zijn. Alleen zou en dan al een post command verzonden moeten worden zonder button. Alleen hoe gaat dit in zijn werk ?
Bedankt alvast
https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
Zoiets :
http://adoptive.esy.es/autocomplete/
Nu was ik bezig op mijn website met het script.
Alleen werkt het niet ?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<p>Datum <input type="text" id="datepicker" name="date" readonly></p>
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<p>Datum <input type="text" id="datepicker" name="date" readonly></p>
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
<div> komt niet zichtbaar.
Zou dit liggen aan de webhosting zelf dat ze iets moeten aan vinken ?
Gewijzigd op 16/07/2017 20:22:28 door - Ariën -
- Ariën - op 16/07/2017 20:20:43:
Dit is cliënt-side, dus van dat dat 'aanvinken' is geen sprake. Een blur event lijkt mij zinvoller.
Ligt eraan wat je wilt bereiken. Blur houd er geen rekening mee of de inhoud van het veld is veranderd. Datepicker verliest de focus als je een datum selecteert, dus dan wordt de onchange getriggerd (hetzelfde als je onblur, alleen wordt er ook gekeken of er wel een nieuwe waarde in het veld staat).
heb het ook zo geprobeerd zonder kalender aan te roepen.
Dit ook zonder resultaat.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
Code (php)
1
2
3
4
2
3
4
$(function() {
// alles uitvoeren
});
Gewijzigd op 16/07/2017 22:35:55 door - Ariën -
Guillaume Storimans op 16/07/2017 22:30:41:
Ik heb de id veranderd naar date. maar zonder resultaat.
heb het ook zo geprobeerd zonder kalender aan te roepen.
Dit ook zonder resultaat.
heb het ook zo geprobeerd zonder kalender aan te roepen.
Dit ook zonder resultaat.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#date').change(function() {
$('#extra').toggle();
});
</script>
</head>
<body>
<input type="text" name="date" id="date">
<div id="extra" style="display:none">
<h1>
Hi
</h1>
</div>
</body>
</html>
Bewerkt:
Het werkt nu wel!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").change(function(){
$("p").show();
});
});
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
</script>
</head>
<body>
<p>Datum <input type="text" id="datepicker" readonly></p>
<p style="display:none">Tijden tijdelijk</p>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").change(function(){
$("p").show();
});
});
$( function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
} );
</script>
</head>
<body>
<p>Datum <input type="text" id="datepicker" readonly></p>
<p style="display:none">Tijden tijdelijk</p>
</body>
</html>