Geek Answers Handbook

JQuery DatePicker and beforeShowDay

I am desperately trying to use this function to include only certain days in my datepicker, but the beforeShowDay function never starts: (

even this does not work:

 $(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'); }

If you have any ideas, I would really appreciate it!

in fact, even this does not work:

 <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>
+7
source share
3 answers

According to the jQueryUI Datepicker API,

enter image description here

This explains why

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

does not work.

I also noticed that you call .datepicker() several times and every time you give it different parameters.

Instead:

 $("#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');

Try to do this:

 $("#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"]; } } });

I also provided you with a demo: http://jsfiddle.net/yTMwu/18/ . Hope this helps!

+24
source

The date passed to the callback function is a fully functional date and time. Therefore, if you want to be compared with a short date string, one of them must be converted. This snippet of only part of the beforeShowDay attribute of the datpike indicates that a conversion is required. Here I just turn off one date on the calendar to prove this point.

  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, "" ]; } }
+3
source

The house gave a good explanation. And I would like to add a shorter code:

If you have an array of availableDates in the format: 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
source

More articles:


All Articles