CODEWITHSUNDEEP
javascriptjquerydatedatepickerjquery-ui-datepicker
Duarte Andrade
Duarte Andrade

Reputation: 85

jQuery datepicker disable all dates per week but one

I want to pick a date, lets say I pick one Monday, i want to only be able to pick only Mondays on the other datepicker and disable all the other dates, in other words I want to pick a interval of 7 days between two datepickers.

How can I achieve this ?

I tried this:

beforeShowDay: function(date) {
  console.log('beforeShowDay');
  var day = date.getDay();
  return [day != day, ''];
},

But not sure if it should work or in which datepicker I should place the function.

UPDATE:

var curday = "";
var unavailableDays = [];
var dateselected = "";

function ViewDay(date) {
    dmy = date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear();
    day = date.getDay();
    if (date > dateselected) {
        if ($.inArray(day, unavailableDays) == -1) {
            return [false, "", "Unavailable"];
        } else {
            return [true, ""];
        }
    } else {
        return [false, "", "Unavailable"];
    }
}

$('#startdatesahasrara').datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 3,
    onSelect: function(e) {

        $('#enddatesahasrara').removeData("hasqtip");
        $('#enddatesahasrara').removeAttr("data-hasqtip");
        $('#enddatesahasrara').qtip("destroy", true);
        $('#enddatesahasrara').removeAttr('title');

        $('#enddatesahasrara').val('');
        unavailableDays = [];
        dateselected = new Date(e);
        curday = new Date(e).getDay();
        unavailableDays.push(curday);
        console.log('trigger');
    }
});

$("#enddatesahasrara").datepicker({
    dateFormat: 'dd/mm/yy',
    showAnim: "slideDown",
    minDate: 0,
    beforeShowDay: ViewDay
});

Upvotes: 0

Views: 713

Answers (1)

RonyLoud
RonyLoud

Reputation: 2436

May it help!

var curday = "";
var unavailableDays = [];
var dateselected = "";
$('.datepicker1').datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText) {
    $('.datepicker').val('');
    unavailableDays = [];
    dateselected = new Date(dateText);
    curday = new Date(dateText).getDay();
    unavailableDays.push(curday);
  }
});

$(".datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  showAnim: "slideDown",
  minDate: 0,
  beforeShowDay: ViewDay //$.datepicker.noWeekends
});


function ViewDay(date) {
  dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  day = date.getDay();
  if (date > dateselected) {
    if ($.inArray(day, unavailableDays) == -1) {
      return [false, "", "Unavailable"];
    } else {
      return [true, ""];
    }
  } else {
    return [false, "", "Unavailable"];
  }
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

<input type="text" class="datepicker1" />
<input type="text" class="datepicker" />

Upvotes: 1

Related Questions