Planning met tijden

Door Guillaume Storimans op 09-07-2017 16:27

5.277 views

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 JS

16-07-2017 20:51

- 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

16-07-2017 22:30

Ik heb de id veranderd naar date. maar zonder resultaat.

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


<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

16-07-2017 22:35 gewijzigd op 16-07-2017 22:35

Waar is je DOM-controle?

     
$(function() {
// alles uitvoeren
});

Guillaume Storimans

16-07-2017 22:46

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


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

Reageren

Inloggen om te reageren