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
});
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" />