Disable specific datepicker days

Question

I am currently doing a dating system in PHP and I have set a datepicker to disable the days that already had the maximum number of appointments. In order to perform this process, I applied the following:

<script>

function nDates(date){  
  var nFechas = false;
  $.ajax({
    type: "POST",
    url: 'prueba.php',
    data: {date},
    async: false,
    success: function(data) {
      if (data == 1)
        nFechas = true;
      else 
        nFechas = false;
    },
    error: function() {
      alert('Error occured');
    }
  });
  return nFechas;
}


$( function() {
  $.datepicker.setDefaults($.datepicker.regional["es"]);
  $( "#datepicker" ).datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth:true,
    changeYear:true,
    yearRange: "2017:2018", 
    firstDay: 1,
    minDate: 0,

    beforeShowDay: function (date) {
      var datesLimits = 20; 
      var day = date.getDay(); 
      var dd = date.getDate();
      var mm = date.getMonth()+1; 
      var yyyy = date.getFullYear();
      if(dd<10){
        dd='0'+dd;
      } 
      if(mm<10){
        mm='0'+mm;
      }
      var date = yyyy+'-'+mm+'-'+dd;
      if (day == 6 || day == 0 ) { 
        return [false, "somecssclass"] 
      } else {
        if (nDates(date)){
          return [true, "someothercssclass"] 
        } else {                                  
          return [false, "somecssclass"]
        }
      }},

    monthNames: ['Enero', 'Febrero', 'Marzo',
                 'Abril', 'Mayo', 'Junio',
                 'Julio', 'Agosto', 'Septiembre',
                 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
                      'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    dayNamesMin: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
    closeText: 'Cerrar',
    prevText: 'Anterior',
    nextText: 'Siguiente',
    currentText: 'Hoy',
  });
});

 </script>

What I want now is to disable very specific days, for example (14-09-2017) (25-12-2017) (28-12-2017) and so on, but maintaining what I have done so far. I have read a little and I applied some things, but I can not find the way to adapt what I have read.

please provide a link to the datepicker that is used in your Site. Is it this one: https://jqueryui.com/datepicker/ ? — Matthias Gwiozda, Aug 18 '17 at 23:31
Look at [these answers](https://stackoverflow.com/search?q=answers%3A1%2B+isaccepted%3Ayes+datepicker+disable+dates)... Your solution certainly is there. — Louys Patrice Bessette, Aug 18 '17 at 23:50
I'm sorry but I think I have not made myself understood, I have already read and applied several codes, including the one of var disableddates = ["8-21-2017", "12-11-2016", "8-25-2017 "," 8-20-2017 "]; Function DisableSpecificDates (date) but it always damages the function that I had before to disable those days where the appointments reach the limit allowed ... I want to both work and not one to ruin the other ... the beforeShowDay I can not apply twice — Lissi29, Aug 19 '17 at 00:20
ok... So which datepicker is it? Bootstrap, jQuery-UI or another? — Louys Patrice Bessette, Aug 19 '17 at 00:27
And.. Your `nDates()` function just can return `false`, since ajax is assynchronous. The `return nFetchas` occurs before any response is obtained from ajax. — Louys Patrice Bessette, Aug 19 '17 at 00:33
Is jquery datepicker. Sorry but I did not understand your answer @louys — Lissi29, Aug 19 '17 at 00:37

Louys Patrice Bessette · Accepted Answer · 2017-08-19T02:46:40.043

0

You definitely should fetch all the dates you wish to disable before instanciating datepicker.

As you do it now, you trigger something like 30 different ajax requests (one for each day, as the calendar renders).

And once the request is out to fetch a result, the script dosn't "wait" for it.
So the line return nFechas; occurs immediately.

Ajax is assynchronous... It takes a couple milliseconds to send the request and to come back with a result. Asynchronous means : it doesn't "pause" the script.

And if it was pausing the script... This would take up to 10 seconds (maybe more) to render the calendar, which I'm sure you would not like.

It will be way more "expensive" on requests if you get all the dates to be disabled in an array on page load. Then on calendar render, just check if the date is in array to disable or not.

So your best solution is here.

EDIT

Try this:

if (day == 6 || day == 0 ) { 
  return [false, "somecssclass"] 
} else if (disabledArray.indexOf(date) != -1){
  return [false, "someothercssclass"] 
} else {
  return [true, "anothercssclass"] 
}

edited Aug 19 '17 at 02:46

answered Aug 19 '17 at 00:50

Louys Patrice Bessette

33,375
6
36
64

To see, I explain, my datepicker at this time has 21-08-2017 and 23-08-2017 disabled because there are already the maximum number of medical appointments registered ... your solution works in my datepicker, but it turns out that it works alone That and automatically disable the validation of the days that I already had, including the validation of the days of weekends ... that is the problem, that I can not join both validations because they collide with each other, that I must be doing wrong or what I can not consult – Lissi29 Aug 19 '17 at 01:13
You can use the validation you had, which is to return false if the day of the week is 6 or 0 (sat and sun)... Return false if the date is found in a disabled array (`array.indexOf(string) != -1`) and return true if the date matches any of those 3 cases. – Louys Patrice Bessette Aug 19 '17 at 02:52
I have placed it in this part specifically in this way if (day == 6 || day == 0 || array.indexOf (string) == -1) {return [false, "somecssclass"] and datepicker what it does Is disabled completely and enables only the days that are inside the array ... if I put true inside the return instead of false, what does is to normally function the datepicker without the new validation of the specific days to disable – Lissi29 Aug 19 '17 at 03:01
`disabledArray.indexOf(date) ==-1` means date is not found in the array. `disabledArray.indexOf(date) !=-1` means date found. ---- Normally, [`.indexof()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf) returns the index (position in number) of the search item in the array. It returns `-1` when not found. – Louys Patrice Bessette Aug 19 '17 at 03:06
So `(day == 6 || day == 0 || array.indexOf (date) != -1) ` to return false (disable date) should be good. – Louys Patrice Bessette Aug 19 '17 at 03:12
1

Solved, I had not noticed that part, now if I understood. Your answer has been the solution to the query. thanks for everything – Lissi29 Aug 19 '17 at 03:15

Disable specific datepicker days

1 Answers1