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..
Laat eens zien wat je al hebt qua code..
Ik zelf heb al iets gemaakt natuurlijk maar het werkt niet.

<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 !
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
Bedankt voor het snelle antwoord.
Nu was ik bezig op mijn website met het script.
Alleen werkt het niet ?


<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 ?
Dit is cliënt-side, dus van dat dat 'aanvinken' is geen sprake. Een blur event lijkt mij zinvoller.
id="date" komt niet voor, dus de change function zal nooit aangeroepen worden.

Reageren