CODEWITHSUNDEEP
jquerydatepicker
Eduardo Perea
Eduardo Perea

Reputation: 1

How to Enable a day after disable some days?

I use this code for disabling days and allow to select mondays only, but now I need to enable some specific days of the year:

$(function(){

  $( "#fecha" ).datepicker({
    minDate: 0,
    maxDate: "+3M",
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
      if (date.getDay() == 1) {
        return [true, ''];
      } else {
        return [false, ''];
      }
    }
  });

  $( "#fecha2" ).datepicker({
    minDate: 0,
    maxDate: "+3M",
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
      if (date.getDay() == 1) {
        return [true, ''];
      } else {
        return [false, ''];
      }
    }
  });

});

I need to enable some specific dates like July 20 of 2017 (20-Jul-2017).

Upvotes: 0

Views: 50

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

I have a similar answer as @gaganshera.

The date comparison with an allowed date array is different, but the result is the same.

Also see in CodePen

$(function(){

  // Human readable date array
  var allowedDays = ["2017-05-25", "2017-06-16", "2017-07-21"];
  
  // Same array as Date objects
  var allowed = [];
  $.each(allowedDays,function(i,val){
    allowed[i] = new Date(val+" 0:00");
  });
  
  // Define options
  var dapickerOptions = {
    minDate: 0,
    maxDate: "+3M",
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
      
      // If an allowed date
      if(JSON.stringify(allowed).indexOf(date.toISOString())!=-1){
        return [true, 'orange'];
      }
      
      // If a monday
      if (date.getDay() == 1) {
        return [true, 'green'];
        
      } else {
        return [false, ''];
      }
    }
  };
  
  // Initiate the datePickers
  $( "#fecha" ).datepicker(dapickerOptions);
  $( "#fecha2" ).datepicker(dapickerOptions);

}); // ready
.green a{
  background-color:green !important;
}
.orange a{
  background-color:orange !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input id="fecha"><br>
<br>
<input id="fecha2"><br>

Upvotes: 0

gaganshera
gaganshera

Reputation: 2639

Do it like this. This will take the specific dates in an array to enable them, and also show the Mondays as enabled.

var availableDates = ["9-5-2017","14-5-2017","15-5-2017"];

function available(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, availableDates) != -1) {
    return [true, "","Available"];
  } else {
  	if (date.getDay() == 1) {
      return [true, ''];
    } else {
      return [false,"","unAvailable"];
    }
  }
}

$('#date').datepicker({ beforeShowDay: available });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" id="date" readonly="readonly" size="12" />

Upvotes: 0

Related Questions