CODEWITHSUNDEEP
jquerydatepicker
Kevin Daniel
Kevin Daniel

Reputation: 431

Jquery Datepicker weekends only between certain dates

I'm trying to get datepicker to show only weekends available between two specific dates. The code I have will show only weekends, or it will only show available between the dates, but not the expected result. Here's what I've got right now:

$(function() {
  $('.datepicker').datepicker({
    "dateFormat": 'yy/mm/dd',
    'minDate': new Date(),
    beforeShowDay: function(dt) {
      if (dt.getMonth() > 3 && dt.getMonth() < 8) {
        return [dt.getDay() == 0 || dt.getDay() == 6, ""];
      } else {
        return [true, "", "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" class="datepicker">

This shows only the weekends available, but now I need to limit that to weekends only between May 27th and August 17th and everything available after August 17th. Does anyone have an idea how to do that?

Upvotes: 1

Views: 256

Answers (1)

indubitablee
indubitablee

Reputation: 8206

add another nested if section to define dates within months. if you wanna include the dates, just make it <= or >= instead of just < and >

$(function() {
  $('.datepicker').datepicker({
    "dateFormat": 'yy/mm/dd',
    'minDate': new Date(),
    beforeShowDay: function(dt) {
      if (dt.getMonth() > 3 && dt.getMonth() < 8) {        
        if (dt.getMonth() == 4 && dt.getDate() < 26) {
          return [true, "", "Available"];
        }
        if (dt.getMonth() == 7 && dt.getDate() > 17) {
          return [true, "", "Available"];
        } 
        return [dt.getDay() == 0 || dt.getDay() == 6, ""];
      } 
      else {
        return [true, "", "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" class="datepicker">

Upvotes: 1

Related Questions