Planning met tijden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Guillaume Storimans

Guillaume Storimans

09/07/2017 16:27:38
Quote Anchor link
Hallo allemaal,

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

PHP hulp

07/12/2019 14:33:00
 
Marthijn Buijs

Marthijn Buijs

09/07/2017 18:09:43
Quote Anchor link
Laat eens zien wat je al hebt qua code..
 
Adoptive Solution

Adoptive Solution

09/07/2017 18:42:15
Quote Anchor link
Met javascript onblur()

https://www.w3schools.com/jsref/event_onblur.asph

Voorbeeld : onblur() maak div zichtbaar
Gewijzigd op 09/07/2017 18:47:21 door Adoptive Solution
 
Guillaume Storimans

Guillaume Storimans

11/07/2017 18:50:05
Quote Anchor link
Ik zelf heb al iets gemaakt natuurlijk maar het werkt niet.
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
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>


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
 
Guillaume Storimans

Guillaume Storimans

15/07/2017 12:06:19
Quote Anchor link
Iemand die mij kan helpen ?
 
PHP JS

PHP JS

15/07/2017 16:24:46
Quote Anchor link
https://jsfiddle.net/a5medmf4/
hier is een voorbeeld van wat je wilt bereiken.
Wat betreft de andere vragen zul je iets duidelijker moeten zijn.
 
Guillaume Storimans

Guillaume Storimans

16/07/2017 16:52:54
Quote Anchor link
Bedabkt voor het scriptje.

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
 
Adoptive Solution

Adoptive Solution

16/07/2017 17:53:16
 
Guillaume Storimans

Guillaume Storimans

16/07/2017 20:00:19
Quote Anchor link
Bedankt voor het snelle antwoord.
Nu was ik bezig op mijn website met het script.
Alleen werkt het niet ?

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


<div> komt niet zichtbaar.
Zou dit liggen aan de webhosting zelf dat ze iets moeten aan vinken ?
 
- Ariën -
Beheerder

- Ariën -

16/07/2017 20:20:43
Quote Anchor link
Dit is cliënt-side, dus van dat dat 'aanvinken' is geen sprake. Een blur event lijkt mij zinvoller.
Gewijzigd op 16/07/2017 20:22:28 door - Ariën -
 
Adoptive Solution

Adoptive Solution

16/07/2017 20:28:40
Quote Anchor link
id="date" komt niet voor, dus de change function zal nooit aangeroepen worden.
 
PHP JS

PHP JS

16/07/2017 20:51:38
Quote Anchor link
- 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).
 
Guillaume Storimans

Guillaume Storimans

16/07/2017 22:30:41
Quote Anchor link
Ik heb de id veranderd naar date. maar zonder resultaat.

heb het ook zo geprobeerd zonder kalender aan te roepen.
Dit ook zonder resultaat.

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

- Ariën -

16/07/2017 22:35:36
Quote Anchor link
Waar is je DOM-controle?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
    
$(function() {
// alles uitvoeren
});
Gewijzigd op 16/07/2017 22:35:55 door - Ariën -
 
Guillaume Storimans

Guillaume Storimans

16/07/2017 22:46:19
Quote Anchor link
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.

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


Bewerkt:

Het werkt nu wel!

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



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.