Date & Time picker in wordpress
Ik wil een date & time picker maken in mijn contact formulier, zodat klanten die een reservering willen maken die eenvoudig via vaste dagen en tijden kunnen plaatsen.
Ik wil dus zelf dagen en tijden open kunnen stellen, en als er een datum gekozen is dat er naast de datepicker een tijd scherm komt waar je een tijd kan kiezen (9:00, 9:30, 10:00, 10:30).
Als klanten dan vervolgens een keuze hebben gemaakt en deze met het formulier mee sturen is het de bedoeling dat de tijd uit de lijst verwijderd wordt.
Iemand enig idee hoe ik dit moet aanpakken?
Alvast heel erg bedankt, dit zal me echt onwijs helpen!!
(Ik werk trouwens in wordpress, als iemand hier een handige tool of plugin voor weet is dat ook goed?!)
Het is te vergelijken met een hotel waar je op deze manier een reservering kunt plaatsen.
Alvast bedankt voor je reactie!
Bedankt dat is (denk ik) wat ik zoek! Hoe en waar plaats ik de timepicker code in mijn huidige code?
Dit is mijn datepicker code:
<script type="text/javascript">// <![CDATA[
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
// ]]></script>
<div class="demo">
Date:
<input id="datepicker" type="text" />
</div>
Gewoon zorgen dat je de juiste .js en .css files integreert.
Ik spreek ze hier aan via het web.
Het is vaak geen slecht idee om jQuery en jQuery-ui te laten hosten door Google, zie http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/.
Dus (eventueel) de js en css files downloaden (van de url's die ik geef) en op zijn plaats zetten.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script>
$(function() {
$( "#datepicker" ).datetimepicker({
showOtherMonths: true,
selectOtherMonths: true,
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd'
});
});
</script>
</head>
<body>
<div class="demo">
Date:
<input id="datepicker" type="text" />
</div>
</body>
</html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script>
$(function() {
$( "#datepicker" ).datetimepicker({
showOtherMonths: true,
selectOtherMonths: true,
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd'
});
});
</script>
</head>
<body>
<div class="demo">
Date:
<input id="datepicker" type="text" />
</div>
</body>
</html>
Gewijzigd op 29/02/2012 10:45:43 door Kris Peeters
Een dateTimePicker dus
Gewijzigd op 29/02/2012 11:04:08 door Kris Peeters