DatePicker (na bepaalde tijd today niet meer als optie)

Status
Niet open voor verdere reacties.
M

mvdb2006

Gebruiker
Lid geworden
1 aug 2007
Berichten
12
Op een website maak ik gebruik van DatePicker voor het kiezen van een bezorgdatum.
Mijn klant wil graag dat 'vandaag' niet meer gekozen kan worden na 13.00 uur. Na 13.00 uur moet de eerst volgende bezorgdatum de volgende dag worden.

Wie heeft hier ervaring mee?
 
Ik neem aan dat je al gebruik maakt van de rangeLow en/of rangeHigh parameters. Je zou bij het aanmaken van de DatePicker kunnen controleren of de tijd > 13.00u is, zoja dan zet je de rangeLow 1 dag verder.

Een voorbeeld (heb de demo pagina gebruikt):
[js]var curDate = new Date(); // Huidige datum opvragen
if(curDate.getHours() > 13){ // Later dan 13.00u?
curDate.setDate(curDate.getDate()+1); // Dan zetten we de datum 1 dag verder
}

var dateStringMonth = (curDate.getMonth() + 1).toString(); // Haal de maand op, +1 omdat deze zero-based is
var dateStringDate = curDate.getDate().toString(); // Haal de dag op
if(parseInt(dateStringMonth) < 10 && dateStringMonth.indexOf("0") != 0){ // Als het eerder dan de 10e maand is, en er nog geen 0 vooraan de string staat
dateStringMonth = "0" + dateStringMonth; // Plaatsen we er een string voor
}
if(parseInt(dateStringDate) < 10 && dateStringDate.indexOf("0") != 0){ // Zelfde verhaaltje als hierboven met de maand
dateStringDate = "0" + dateStringDate;
}

var dateStringResult = curDate.getFullYear() + dateStringMonth + dateStringDate; // Maak er een string van die gelezen kan worden door de DatePicker library

datePickerController.createDatePicker({
formElements:{"demo-1":"%d/%m/%Y"},
rangeLow: dateStringResult // Pas rangeLow restrictie toe
});[/js]

Het resultaat na 13.00u:

Snap0013_S.png


Resultaat vóór 13.00u:

Snap0014_S.png


Probleem blijft dan nog wel dat een gebruiker de webpagina open heeft staan om 12.45 uur en om 13.45 uur na de pauze weer verder gaat met zijn bezigheden, waardoor je nog steeds de optie krijgt om dezelfde dag te kiezen. Oplossing? setInterval gebruiken en elke minuut de rangeLow veranderen naar de huidige datum? Wellicht moet je daarvoor wel de DatePicker opnieuw maken, pas dan wel op met bestaande gegevens (geselecteerde datum); deze moet je uiteraard behouden.

P.S. Zorg in ieder geval voor een server-side check, anders kan men d.m.v. een simpele javascript aanpassing zomaar bestellingen plaatsen voor dezelfde dag na 13.00u

Ik hoop dat je hier wat verder mee kan.
 
Laatst bewerkt:
Dit is precies wat ik nodig heb. Maar helaas geen idee waar dit javascript te moeten plaatsen. In de .js of op de .php pagina?
Met de parameters rangeLow en rangeHigh ben ik niet bekend.

Wil je me er een beetje mee verder helpen?

CaptainBri zei:
Ik neem aan dat je al gebruik maakt van de rangeLow en/of rangeHigh parameters. Je zou bij het aanmaken van de DatePicker kunnen controleren of de tijd > 13.00u is, zoja dan zet je de rangeLow 1 dag verder.

Een voorbeeld (heb de demo pagina gebruikt):
[js]var curDate = new Date();
if(curDate.getHours() > 13){
curDate.setDate(curDate.getDate()+1);
}

var dateStringMonth = (curDate.getMonth() + 1).toString();
var dateStringDate = curDate.getDate().toString();
if(parseInt(dateStringMonth) < 10 && dateStringMonth.indexOf("0") != 0){
dateStringMonth = "0" + dateStringMonth;
}
if(parseInt(dateStringDate) < 10 && dateStringDate.indexOf("0") != 0){
dateStringDate = "0" + dateStringDate;
}

var dateStringResult = curDate.getFullYear() + dateStringMonth + dateStringDate;

datePickerController.createDatePicker({
formElements:{"demo-1":"%d/%m/%Y"},
rangeLow: dateStringResult
});[/js]

Het resultaat na 13.00u:

Snap0013_S.png


Resultaat vóór 13.00u:

Snap0014_S.png


Probleem blijft dan nog wel dat een gebruiker de webpagina open heeft staan om 12.45 uur en om 13.45 uur na de pauze weer verder gaat met zijn bezigheden, waardoor je nog steeds de optie krijgt om dezelfde dag te kiezen. Oplossing? setInterval gebruiken en elke minuut de rangeLow veranderen naar de huidige datum? Wellicht moet je daarvoor wel de DatePicker opnieuw maken, pas dan wel op met bestaande gegevens (geselecteerde datum); deze moet je uiteraard behouden.

Ik hoop dat je hier wat verder mee kan.
Klik om te vergroten...
 
Op de plaatst waar de DatePicker wordt aangemaakt (datePickerController.createDatePicker functie) moet je deze code plaatsen. Let echter wel op dat je het gedeelte na het aanmaken van de dateStringResult string niet mee neemt, ik hoop dat je dat begrijpt.

Als je de huidige javascript code kan plaatsen, en dan met name de code waar de DatePicker aangemaakt wordt, zou dat fijn zijn.

P.S. Hoogstwaarschijnlijk moet dit in het .js bestand gezet worden.
 
Laatst bewerkt:
Helaas krijg ik het niet werkend. Datum van vandaag blijft selecteerbaar terwijl het later is dan 13.00 uur.

Mijn origineel datepicker.js bestand

Heb jij enig idee waar jouw stukje javascript geplaatst moet worden in mijn .js bestand?

Wederom super bedankt!
 
Op de webpagina webshop.php?formshop_redir=true staat de datepicker, maar hoe deze er komt kan ik niet zien (wordt server-side en dus in dit geval in php geregeld?).

Als je de broncode bekijkt zie je dat er een DatePicker gemaakt wordt op de pagina:
[js]datePickerController.addEvent(window, "load", function() {
var opts = {
// The ID of the associated form element
id:"dp-js1",
// The date format to use
format:"d-sl-m-sl-Y",
// Days to highlight (starts on Monday)
highlightDays:[0,0,0,0,0,1,1],
// Days of the week to disable (starts on Monday)
disabledDays:[0,0,0,0,0,0,0],
// Dates to disable (YYYYMMDD format, "*" wildcards excepted)
disabledDates:{
"20090601":"20090612", // Range of dates
"20090622":"1", // Single date
"****1225":"1" // Wildcard example
},
// Date to always enable
enabledDates:{},
// Don't fade in the datepicker
// NOTE: Only relevant if "staticPos" is set to false
noFadeEffect:false,
// Is it inline or popup
staticPos:false,
// Do we hide the associated form element on create
hideInput:false,
// Do we hide the today button
noToday:true,
// Do we show weeks along the left hand side
showWeeks:true,
// Is it drag disabled
// NOTE: Only relevant if "staticPos" is set to false
dragDisabled:true,
// Positioned the datepicker within a wrapper div of your choice (requires the ID of the wrapper element)
// NOTE: Only relevant if "staticPos" is set to true
positioned:"",
// Do we fill the entire grid with dates
fillGrid:true,
// Do we constrain dates not within the current month so that they cannot be selected
constrainSelection:true,
// Callback Object
callbacks:{"create":[createSpanElement], "dateselect":[showEnglishDate]},
// Do we create the button within a wrapper element of your choice (requires the ID of the wrapper element)
// NOTE: Only relevant if staticPos is set to false
buttonWrapper:"",
// Do we start the cursor on a specific date (YYYYMMDD format string)
cursorDate:""
};
datePickerController.createDatePicker(opts);
});[/js]

Als je dit kan aanpassen (misschien staat dit ergens in de server-side code, ik kan dit niet zien) zit je goed. Je zou het dan naar iets zoals dit moeten aanpassen:

[js]
datePickerController.addEvent(window, "load", function() {
var curDate = new Date();
curDate.setHours(12);
if(curDate.getHours() > 13){
curDate.setDate(curDate.getDate()+1);
}

var dateStringMonth = (curDate.getMonth() + 1).toString();
var dateStringDate = curDate.getDate().toString();
if(parseInt(dateStringMonth) < 10 && dateStringMonth.indexOf("0") != 0){
dateStringMonth = "0" + dateStringMonth;
}
if(parseInt(dateStringDate) < 10 && dateStringDate.indexOf("0") != 0){
dateStringDate = "0" + dateStringDate;
}

var dateStringResult = curDate.getFullYear() + dateStringMonth + dateStringDate;

var opts = {
rangeLow: dateStringResult,
// The ID of the associated form element
id:"dp-js1",
// The date format to use
format:"d-sl-m-sl-Y",
// Days to highlight (starts on Monday)
highlightDays:[0,0,0,0,0,1,1],
// Days of the week to disable (starts on Monday)
disabledDays:[0,0,0,0,0,0,0],
// Dates to disable (YYYYMMDD format, "*" wildcards excepted)
disabledDates:{
"20090601":"20090612", // Range of dates
"20090622":"1", // Single date
"****1225":"1" // Wildcard example
},
// Date to always enable
enabledDates:{},
// Don't fade in the datepicker
// NOTE: Only relevant if "staticPos" is set to false
noFadeEffect:false,
// Is it inline or popup
staticPos:false,
// Do we hide the associated form element on create
hideInput:false,
// Do we hide the today button
noToday:true,
// Do we show weeks along the left hand side
showWeeks:true,
// Is it drag disabled
// NOTE: Only relevant if "staticPos" is set to false
dragDisabled:true,
// Positioned the datepicker within a wrapper div of your choice (requires the ID of the wrapper element)
// NOTE: Only relevant if "staticPos" is set to true
positioned:"",
// Do we fill the entire grid with dates
fillGrid:true,
// Do we constrain dates not within the current month so that they cannot be selected
constrainSelection:true,
// Callback Object
callbacks:{"create":[createSpanElement], "dateselect":[showEnglishDate]},
// Do we create the button within a wrapper element of your choice (requires the ID of the wrapper element)
// NOTE: Only relevant if staticPos is set to false
buttonWrapper:"",
// Do we start the cursor on a specific date (YYYYMMDD format string)
cursorDate:""
};
datePickerController.createDatePicker(opts);
});
[/js]

De code moet in ieder geval niet in het datepicker.js bestand.
 
Helaas werkt het niet, zie winkelwagen op: LINK
Als je iets in de winkelwagen hebt toegevoegd, kan je in de winkelwagen voor bezorgdatum kiezen.
 
Helaas nog steeds niet werkend. Met welke versie van Datepicker heb je dit getest?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan