"Date time picker" datum regel.

Status
Niet open voor verdere reacties.
R

Royzilla

Gebruiker
Lid geworden
10 apr 2014
Berichten
187
Hee goedemorgen,

ik heb een kalender in me pagina "Datetimepicker" geïmporteerd. Deze werkt behoorlijk goed maar ik wil er zelf een kleine eis bijvoegen.
Als er in de eerste textbox (als je er op klikt komt de timepicker tevoorschijn) een datum geselecteerd is, moet er in de 2e tekstbox bij de geselecteerde datum een maximale datum van 7 dagen zijn.

Bijvoorbeeld: in de eerste tekstbox klik je op 21/05/2014 dan moet de datum 28/05/2014 zijn, Dit doet hij nu ook zoals ik het heb. MAAR: Als je dan 22/05/2014 doet terwijl de datum van vandaag 21/05/2014 is pakt die in de 2e textbox niet de 7 dagen na de geselecteerde waarde maar alsnog die van vandaag.(28/05/2014 terwijl het 29/05/2014 moet zijn.

Bekijk bijlage helpmij.nl.zip

zo roep ik het aan:
PHP: 
						<input readonly type="text" name="startDate" id="startDate" value="" /><br><br>


						<input readonly type="text" name="endDate" id="endDate" value="" /><br><br>
[js]
var startDateTextBox = $('#startDate');
var endDateTextBox = $('#endDate');

startDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
minDate: 0,
onClose: function(dateText, inst) {
if (endDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
endDateTextBox.datetimepicker('setDate', testStartDate);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
}
});
endDateTextBox.datetimepicker({
timeFormat: 'HH:mm z',
showTimezone: false,
timezoneList: false,
maxDate:7,
onClose: function(dateText, inst) {
if (startDateTextBox.val() != '') {
var testStartDate = startDateTextBox.datetimepicker('getDate');
var testEndDate = endDateTextBox.datetimepicker('getDate');
if (testStartDate > testEndDate)
startDateTextBox.datetimepicker('setDate', testEndDate);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
startDateTextBox.datetimepicker('option', 'maxDate', '+7d' );
}
});
[/js]

zou iemand me kunnen helpen?

Alvast bedankt!
 
Laatst bewerkt door een moderator:
Welke plugin gebruik je hiervoor?

Dat maakt het wat eenvoudiger zoeken wat de mogelijkheden zijn :)
 
ik denk dat je dit bedoeld?
PHP: 
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<link rel="STYLESHEET" href="jquery-ui-timepicker-addon.css" type="text/css">
<link rel="STYLESHEET" href="jquery-ui.css" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
de link:

http://trentrichardson.com/examples/timepicker/#basic_examples

Ik hoor het wel van je als je iets anders bedoelde.

MVG Roy.
 
Het ging mij voornamelijk om de link ;)

Het probleem zit hier in:
[js]startDateTextBox.datetimepicker('option', 'maxDate', '+7d' );[/js]
Die +7d is altijd vanaf vandaag.

Wil je dat dus afhankelijk maken moet je dit doen:
[js]startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') + 7);[/js]
Als dat niet werkt dan krijg ik niet het verwachte resultaat terug uit endDateTextBox.datetimepicker('getDate')
 
Dit werkt helaas niet zoals verwacht, Als ik het zo toepas zoals jij zegt, krijg je bij de 2e tekstvak geen maximale datum, je kan dan alles selecteren.

Hoe gaan we dit oplossen?
 
Wat is het resultaat van "endDateTextBox.datetimepicker('getDate')"?
[js]
onSelect: function (selectedDateTime){
console.log(endDateTextBox.datetimepicker('getDate'));
console.log(endDateTextBox.datetimepicker('getDate') + 7);
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') + 7);
}[/js]

In je console zul je nu twee keer een waarde moeten zien verschijnen.
 
Dit werkt ook niet.

wat er nu gebeurd als je in 1 een datum selecteert,

kan je het in 2 vaker doen en als je dan buiten het tekstvak klikt kan je daarna niet meer die kalender tevoorschijn krijgen.
 
De code is niet veranderd ten opzichte van hiervoor nee, maar ik heb debugregels toegepast om te weten te komen wat het resultaat van functies is.

Dat is iets dat je doet wanneer code niet werkt, dus wat zijn de regels welke in je console verschijnen?
Je probleem zit in de datumberekening, dus dat is het startpunt van debuggen.
 
Dit komt er uit.

LOG: Sat May 31 14:03:00 UTC+0200 2014

LOG: Sat May 31 14:03:00 UTC+0200 20147
 
Oke, blijkbaar wordt er dus een string teruggegeven.
Waarschijnlijk moeten we die in een aantal stappen verbouwen.

Laten we eerst maar eens kijken of er een Date-object van te maken is.
[js]
onSelect: function (selectedDateTime){
var tempDate = new Date(endDateTextBox.datetimepicker('getDate'));
console.log(tempDate);
tempDate = new Date(tempDate.getDate() + 7);
console.log(tempDate);
startDateTextBox.datetimepicker('option', 'maxDate', tempDate);
}[/js]
 
Als je het op die manier doet is dit de output :

Text box 1 :
LOG: Thu May 29 14:20:00 UTC+0200 2014

Text box 2:
LOG: Thu Jan 1 01:00:00 UTC+0100 1970
 
Tekstvak 1 :
LOG: Thu May 29 14:40:00 UTC+0200 2014

Tekstvak 2:
LOG: Thu Jun 5 14:40:00 UTC+0200 2014

Dit krijg ik eruit. :)
 
[js]
onSelect: function (selectedDateTime){
var tempDate = new Date(endDateTextBox.datetimepicker('getDate'));
startDateTextBox.datetimepicker('option', 'maxDate', tempDate.setDate(tempDate.getDate() + 7));
}[/js]
Dit moet dus voldoende zijn.
 
Alleen nu moet het nog zo zijn, dat de eerste datum die geselecteerd wordt wordt opgehaald in tekstvak 2 en dat je daar dan 7 dagen maximaal op heb.

bijvoorbeeld je selecteert in tekstvak 1: 30/05/2014 dan moet in tekstvak 2 de maximale datum die je kan kiezen 06/06/2014 zijn.
 
Dat is het zelfde principe toch? Lijkt mij dat je daar zelf wel uit moet komen.
 
Daarom kom ik juist op dit forum want ik kom er gewoon echt niet uit. Jij zegt dat ik
PHP: 
   var tempDate = new Date(endDateTextBox.datetimepicker('getDate'));
    startDateTextBox.datetimepicker('option', 'maxDate',  tempDate.setDate(tempDate.getDate() + 7));
precies het zelfde uit moet voeren op tekstvak 1? en dan? dan heeft tekstvak 2 toch niet de maximale datum?
ik hoop dat je me hier mee kan helpen want ik snap er echt niks van, nu je het hebt uitgelegd snap ik wel wat jij hebt gemaakt maar kan ik dit niet toepassen.

het zou top zijn als je me hiermee wilt helpen!

alvast bedankt!
 
We hebben nu de onSelect van het eindveld aangepast, deze past nu de maxDate van het startveld aan.

Het is dus zaak dat we de onSelect van het startveld aanpassen zodat deze de maxDate van het eindveld aanpast :)

[js]onSelect: function (selectedDateTime)
{
var tempDate = new Date(startDateTextBox.datetimepicker('getDate'));
endDateTextBox.datetimepicker('option', 'maxDate', tempDate.setDate(tempDate.getDate() + 7));
}[/js]
 
Als ik dit invoeg in de dat stuk, moet ik dan dat andere van onSelect van het eindveld weghalen?
want op deze manier zijn alle data's nog beschikbaar.
 
Dan zetten we de minDate van het eindveld op de waarde van het startveld:
[js]onSelect: function (selectedDateTime)
{
var tempDate = new Date(startDateTextBox.datetimepicker('getDate'));
endDateTextBox.datetimepicker('option', 'minDate', tempDate);
endDateTextBox.datetimepicker('option', 'maxDate', tempDate.setDate(tempDate.getDate() + 7));
}[/js]
Nu horen bij selectie van het startveld de mogelijkheden van het eindveld tussen de gekozen waarde en een week daarna liggen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan