Archief - date- en timepicker probleem

Visaversa · 15 feb 2013

Ik heb 2 testvakken aangemaakt met 2 id's, #datum en #uur. In het ene tekstvak verschijnt er een datum picker en in het andere tekstvak een tijd picker. In de datum picker is het me gelukt om alle maan- en zondagen uit te schakelen, zodat deze niet aangeklikt kunnen worden. Voor de tijd picker is het ook gelukt om enkel de uren van 12 tot 22:30 uur te tonen.

Wat mijn bedoeling nu is, is het volgende: Als u in de datum picker kiest zou je in het volgende tekstvak (tijd picker) een andere optie moeten krijgen dan het gebruikelijke uur, dus vanaf 12 tot 22:30 uur. Als er een woensdag aangeklikt gaat worden, zou ik in de tijd picker graag alleen een optie weergeven van 12:00 uur tot 15:00 uur.

Hier is de code van de datum picker die alle maan- en zondagen uitschakelt:

Code:

jQuery(function($){
$( "#datum" ).datepicker({  
firstDay: 1,
beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 1 && day != 0)];
    }
 });
 });

En hier is de code die de tijd picker weergeeft waaruit enkel uren vanaf 12 tot 22:30 gekozen kunnen worden, de bedoeling is dat ik op woensdag een andere optie krijg, de tijd picker moet dan enkel de uren vanaf 12 tot 15:00 uur weergeven:

Code:

    jQuery(function($){
$('#uur').timepicker({
firstDay: 1,
showPeriodLabels: true,
        showPeriod: false,
        onHourShow: OnHourShowCallback,
        onMinuteShow: OnMinuteShowCallback


    });
function OnHourShowCallback(hour) {
    if ((hour > 22) || (hour < 12)) {
        return false; // not valid
    }
    return true; // valid
}
function OnMinuteShowCallback(hour, minute) {
    if ((hour == 22) && (minute >= 35)) { return false; } // not valid
    if ((hour == 6) && (minute < 00)) { return false; }   // not valid
    return true;  // valid
}
 });

Scissor · 19 feb 2013

Je zou dit kunnen forceren, maar weet niet of dit wel zo'n ideale manier is om mee te geven wat je wil geven. Misschien eens kaderen in het grotere geheel van je webapplicatie?

Wat je zou kunnen doen is elke woensdag vb. een specifieke class meegeven. Vervolgens met jQuery via een if statement gaan kijken:

Als het geklikte element die specifieke class heeft = geef een timepicker met die uren mee, indien niet geef de standaard uren mee).

Of de volgende manier:

Elke dag van de week komt overeen met een specifiek getal dat je via Javascript kan ophalen met de functie getDay(). Meer info vind je o.a hier: JavaScript getDay() Method

Op die manier kan je makkelijker kijken bij een click event of je dag gelijk is aan een woensdag (3). Als dat zo is, start je een specifieke timepicker voor die dag met beperkte tijd.

Hier nog wat leuke voorbeeltjes om wat inspiratie uit op te halen: 5 jQuery UI Datepicker Examples | Nine-One-One... Need Code, Help!

Visaversa · 28 feb 2013

Sorry voor mijn late reactie en hartelijk dank voor uw reactie.

Ik heb gedaan wat u gezegd heeft, maar nu de if functie er staat, neemt hij steeds de else functie aan blijkbaar. met een alert("test"); doet die het wel. Ik ben er bijna, maar ik vind het probleem nog niet.

Scissor · 28 feb 2013

Waarschijnlijk is er dan een fout in je if - statement zodat hij automatisch altijd de else neemt? Paste je functie anders eens?

Visaversa · 28 feb 2013

Hier is de code, het is vooral die if else beneden die raar doet:

Code:

$(document).ready(function() {
// Disable a list of dates
var disabledDays = ["3-31-2013", "4-1-2013", "5-1-2013", "5-9-2013", "5-19-2013", "5-20-2013", "7-11-2013", "7-21-2013", "8-15-2013", "9-27-2013", "11-1-2013", "11-2-2013", "11-11-2013", "11-15-2013", "12-25-2013"  ];
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    var isWeekend = disableWeekend(date);
    if(isWeekend=='false'){
        return [false];
    }
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

function disableWeekend(date) {
    var day = date.getDay();
    if((day==0) || (day==1)){
        return [false];
    }
    else{
        return[true];
    }
}
$('#datum').datepicker({
        dateFormat: 'mm-dd-yy',
        beforeShowDay: disableAllTheseDays,
});
});

$(document).ready( function(){
    $('#datum').change(
        function(){
                if (new Date($(this).val()).getDay() == 3)
                    {
	                    $('#uur').timepicker({
firstDay: 1,
        showPeriod: false,
        onHourShow: OnHourShowCallback,
        onMinuteShow: OnMinuteShowCallback    
    });

function OnHourShowCallback(hour) {
    if ((hour > 22) || (hour < 12)) {
        return false; // not valid
    }
    return true; // valid
}
function OnMinuteShowCallback(hour, minute) {
    if ((hour == 15) && (minute >= 00)) { return false; } // not valid
    if ((hour == 12) && (minute < 00)) { return false; }   // not valid
    return false;  // valid
}
alert("Op woensdag kunt u maar tot 15 uur reserveren")
                    }
        
   else{
 $('#uur').timepicker({
firstDay: 1,
showPeriodLabels: true,
        showPeriod: false,
        onHourShow: OnHourShowCallback,
        onMinuteShow: OnMinuteShowCallback    
    });

function OnHourShowCallback(hour) {
    if ((hour > 22) || (hour < 12)) {
        return false; // not valid
    }
    return true; // valid
}
function OnMinuteShowCallback(hour, minute) {
    if ((hour == 22) && (minute >= 30)) { return false; } // not valid
    if ((hour == 12) && (minute < 00)) { return false; }   // not valid
}
	                   alert("U kunt tot 22 uur reserveren");   
   }
        }
    );
  });

Scissor · 28 feb 2013

Kan je je scriptje eens in een Fiddle zetten samen met je html (enkel degene die relevant is natuurlijk)

Je kan dat hier doen: Create a new Fiddle - jsFiddle , is trouwens een heel handige manier om zo'n kleine zaken te testen.
Ik zie ook in je script dat je twee keer een document.ready doet, ik vermoed dat je twee scripts samen heb gepost?

Visaversa · 1 mrt 2013

Hier is een link naar jsFiddle, wat ook nog een probleem geeft is de DateFormat (dd/mm/yy):

http://jsfiddle.net/za3Ap/16/

Scissor · 1 mrt 2013

Je dateFormat probleem is snel opgelost. Je moet gewoon's kijken naar de scripts die je allemaal inlaadt

Code:

<link rel="stylesheet" href="http://willytest.be/jquery_ui/development-bundle/themes/ui-lightness/jquery.ui.all.css">
<link rel="stylesheet" href="http://willytest.be/jquery_ui/development-bundle/ui/jquery-ui-timepicker.css">
<script src="http://willytest.be/jquery_ui/development-bundle/ui/jquery.ui.core.js"></script>
<script src="http://willytest.be/jquery_ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script src="http://willytest.be/jquery_ui/development-bundle/ui/taal.js"></script>
<script src="http://willytest.be/jquery_ui/development-bundle/ui/jquery.ui.timepicker.js"></script>

.

Als je je jquery ui en datepicker al eens vervangt door
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
En ik zou ook jQuery zelf door google laten hosten,
dan werkt je date-format aanpassen

Code:

dateFormat: 'dd/mm/yy'

Je timepicker laadt bij mij niet

Visaversa · 1 mrt 2013

Oké, de dateFormat werkt naar behoren!

Je moet voor de time picker te zien wel eerst eerst een datum kiezen, anders werkt het inderdaad niet. Als je dit doet, geeft hij enkel wat in de else staat en ik zou graag hebben dat die als het dag 3 (woensdag) is, mijn if functie gebruikt.

Scissor · 1 mrt 2013

Ik selecteer een datum, maar als ik in het input veld daarnaast klik, gebeurd er niks in je fiddle

Visaversa · 1 mrt 2013

Gebruik je deze link:

Edit this Fiddle - jsFiddle

Bij mij komt de time picker er wel.

Scissor · 3 mrt 2013

Gebeurd niks

Archief - date- en timepicker probleem

Visaversa

Legacy Member

Scissor

Legacy Member

Visaversa

Legacy Member

Scissor

Legacy Member

Visaversa

Legacy Member

Scissor

Legacy Member

Visaversa

Legacy Member

Scissor

Legacy Member

Visaversa

Legacy Member

Scissor

Legacy Member

Visaversa

Legacy Member

Scissor

Legacy Member