2013-01-23 15 views
7

Ich bin verzweifelt nur bestimmte Tage in meinem Datepicker zu ermöglichen versuchen, diese Funktion zu nutzen, aber die beforeShowDay Funktion wird nie ausgelöst :(JQuery Datepicker und beforeShowDay

auch dieser nicht funktioniert:

$(document).ready(function(){ 
/*initialisation des composants*/ 
initComponent(); 
}); 


availableDates = new Array(); 

/* Fonction d'initialisation des composants */ 
function initComponent(){ 

/* Date retrait */ 
$("#dateRetrait").datepicker(); 

$("#dateRetrait").datepicker({beforeShowDay: function(d) { 
     console.log("bsd"); 
     alert("bsd"); 
    }}); 

//$("#dateRetrait").datepicker({buttonImage: "../../../Images/boutons/btn_calendier.png"}); 
//$("#dateRetrait").datepicker({showButtonPanel: true }); 
//$("#dateRetrait").datepicker({beforeShow: function() {setTimeout(function() {$(".ui-datepicker").css("z-index", 9999999999);}, 10);}}); 

$('#comboLieux').attr('disabled', 'disabled'); 
$('#comboCreneau').attr('disabled', 'disabled'); 
$('#dateRetrait').attr('disabled', 'disabled'); 
$('#dateRetrait').datepicker('option', 'minDate', new Date()); 

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy'); 
} 

wenn Sie irgendwelche Ideen haben, würde ich es sehr schätzen

in der Tat, auch ist dies nicht funktioniert:

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Datepicker - Restrict date range</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
$(function() { 
$("#datepicker").datepicker({ minDate: -20, maxDate: "+1M +10D" }); 
$("#datepicker").datepicker({beforeShowDay: function(d) { 
     console.log(d); 
     alert(d); 
    }}); 
}); 
</script> 
</head> 
<body> 
<p>Date: <input type="text" id="datepicker" /></p> 
</body> 
</html> 
+0

Bitte gebe html – Dom

+0
+0

Auch Wie sieht der Rest Ihrer js aus, insbesondere der Abschnitt, in dem Sie die Funktion aufrufen: 'initComponent()'? – Dom

Antwort

24

Nach jQueryUI's Datepicker API,

enter image description here

Dies erklärt, warum

$("#dateRetrait").datepicker({beforeShowDay: function(d) { 
     console.log("bsd"); 
     alert("bsd"); 
    }}); 

funktioniert nicht.

Auch bemerkte ich Sie anrufen .datepicker() mehrere Male und jedes Mal, wenn Sie es verschiedene Parameter geben.

Statt:

$("#dateRetrait").datepicker(); 

$("#dateRetrait").datepicker({beforeShowDay: function(d) { 
     console.log("bsd"); 
     alert("bsd"); 
    }}); 

$('#dateRetrait').datepicker('option', 'minDate', new Date()); 

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy'); 

versuchen dies zu tun:

$("#dateRetrait").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: new Date(), 
    beforeShowDay: function(d) { 
     var dmy = (d.getMonth()+1); 
     if(d.getMonth()<9) 
      dmy="0"+dmy; 
     dmy+= "-"; 

     if(d.getDate()<10) dmy+="0"; 
      dmy+=d.getDate() + "-" + d.getFullYear(); 

     console.log(dmy+' : '+($.inArray(dmy, availableDates))); 

     if ($.inArray(dmy, availableDates) != -1) { 
      return [true, "","Available"]; 
     } else{ 
      return [false,"","unAvailable"]; 
     } 
    } 
    }); 

Ich habe auch Ihnen eine Demo zur Verfügung gestellt: http://jsfiddle.net/yTMwu/18/. Hoffe das hilft!

+0

du bist mein Gott !!!! ich nicht glaube, die Mehrfachanrufe könnten die Komponente nerven ... Vielen Dank !!! – user1826124

+0

Haha kein Problem, stellen Sie sicher, dass Sie '.datepicker()' einmal in der Zukunft anrufen.happy coding! – Dom

+0

Tut dies, wenn Sie mehrere haben IDs, die dieses datepicker() verwenden? – Jeff

3

Das Datum in der Callback-Funktion übergeben wird, ist ein vollwertiges Datums- und Zeit. Wenn Sie also einen Vergleich mit einer kurzen Datumszeichenfolge durchführen möchten, muss eine davon konvertiert werden. Dieser Ausschnitt nur des beforeShowDay-Attributabschnitts des Datepickers zeigt, dass eine Konvertierung erforderlich ist. Hier deaktiviere ich einfach ein einzelnes Datum im Kalender, um den Punkt zu beweisen.

   beforeShowDay: function(date) { 
       var dd = date.getDate(); 
       var mm = date.getMonth()+1; //January is 0! 
       var yyyy = date.getFullYear(); 
       var shortDate = mm+'/'+dd+'/'+yyyy; 
       var test = "12/30/2014"; 
       if (shortDate == test) { 
        return [false, "" ]; 
       } else { 
        return [true, "" ]; 
       } 
      } 
0

Dom gab eine gute Erklärung. Und ich möchte Code hinzufügen mehr verkürzen:

Wenn Sie Array von availableDates im Format haben: 0000-00-00 (yyyy-mm-dd)

$("#dateRetrait").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    minDate: new Date(), 
    beforeShowDay: function(d) {   
     var year = d.getFullYear(), 
      month = ("0" + (d.getMonth() + 1)).slice(-2), 
      day = ("0" + (d.getDate())).slice(-2); 

     var formatted = year + '-' + month + '-' + day; 

     if ($.inArray(formatted, availableDates) != -1) { 
      return [true, "","Available"]; 
     } else{ 
      return [false,"","unAvailable"]; 
     } 
    } 
}); 
+0

Vielen Dank für dieses Code-Snippet, das einige begrenzte, sofortige Hilfe bieten könnte.Eine korrekte Erklärung [würde erheblich verbessern] (// meta.stackexchange. com/q/114762) seine Long-te Rm-Wert durch Zeigen * warum * das ist eine gute Lösung für das Problem, und würde es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte [bearbeiten] Sie Ihre Antwort, um einige Erklärungen hinzuzufügen, einschließlich der Annahmen, die Sie getroffen haben. –

Verwandte Themen