Atualizado: a princípio, pensei que houvesse um bug com o código de resposta (na verdade, não olhei para ele) que forneci a partir da resposta anterior. Mas depois de examinar o código antigo novamente, percebi que não há um bug no código antigo, pois a classe datepicker é removida toda vez que o objeto selecionador de data é inicializado. Portanto, atualizei esta resposta para refletir isso.
Para este código, é semelhante ao outro código que forneci a você. Só que quando se trata de selecionador de data em uma divisão é diferente. No entanto, eu comentei isso no código. Para o terceiro datepicker, eu componho esse datepicker quando a primeira função maxDate é executada para o primeiro datepicker, então contra quando a segunda função do selecionador de data maxDate é executada. Como você não deseja que o usuário faça nada com o terceiro selecionador de data, exceto vê-lo, usei uma divisão em vez de um campo de entrada como um marcador para o terceiro selecionador de data. Eles ainda podem selecionar a data, mas isso não fará nada. Você provavelmente pode adicionar estilo a essas datas para fazer parecer que os estados selecionados e não selecionados são os mesmos. Além disso, dicas de ferramentas podem ser adicionadas.
Para essa resposta, também apresento duas versões. A segunda versão é melhor otimizada e mais flexível. As versões 1 e 2 são o mesmo código. No entanto, a segunda versão atribui o objeto jQuery dos 3 datepickers a 3 variáveis, de modo que toda vez que essas divisões precisam ser usadas, não faz com que jQuery procure esses objetos de divisão novamente. Além disso, é mais fácil para você alterar o contexto de nomenclatura de um lugar.
Tente brincar selecionando o primeiro dia e você verá que os dias mudarão dinamicamente. Além disso, se você consultar qualquer uma das minhas respostas e encontrar algum bug nela, fique à vontade para me notificar sobre os bugs no comentário. Obrigado.
Versão 1:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() { var array = ["15-01-2020","18-01-2020"]; // Store date for datepicker3 here var dp3 = []; function includeDate(date) { var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date); // Date 0 = Sunday & 6 = Saturday return date.getDay() !== 0 && array.indexOf(dateStr) === -1; } function getTomorrow(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); } function dp2ini () { var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem, * removing its class is faster in this case. * * On the other hand if a datepicker widget is a part * or a division, it has to be destroy as the html * for the widget is placed as html content inside that division, * and simply just removing the hasDatepicker class from that division * will cause the reinitializer to write in a second datepicker widget. * * In a division where it only contained the picker * object, it is faster to just set the HTML to blank * and remove the hasDatepicker class. On the otherhand, * for more complicated division, it is better to use, * the destroy option from "datepicker". */ $('#datepicker2').val('').removeClass("hasDatepicker");
$('#datepicker2').datepicker({ inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: date_diff + 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
dp3[1] = new Date();
dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra );
dp3[1] = dp3[1].toDateString();
// Destroy dp3 and re-initalize it.
//$('#datepicker3').datepicker("destroy"); $('#datepicker3').empty();
$('#datepicker3').removeClass("hasDatepicker"); $( "#datepicker3" ).datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
$('#datepicker1').datepicker({ defaultDate: "+1d", inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = new Date(); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } /* Initialize datepicker 3 here. */ // NOTE: If dp1 needed to be reinitialize dp3 // also have to be destroyed and reinitialize. // The last day will always be a pick-able one... // Because if it wasn't another day would had been added to it. dp3[0] = new Date(); dp3[0].setDate( dp3[0].getDate() + max + extra ); dp3[0] = dp3[0].toDateString(); $( "#datepicker3" ).datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
$( "#datepicker1" ).change(dp2ini); // Also trigger the change event. $( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
Versão 2:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() { var array = ["15-01-2020","18-01-2020"]; // Store date for datepicker3 here var dp3 = []; var datepicker1 = $('#datepicker1')
datepicker2 = $('#datepicker2'), datepicker3 = $('#datepicker3');
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
function dp2ini () {
var from = datepicker1.datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
/*
* For an input field, the hasDatepicker class have to removed
* for the options to take effect if re-initialize. This, can
* also be done with the destroy option of datepicker
* $('#datepicker2').datepicker("destroy"). However, it seem, * removing its class is faster in this case. * * On the other hand if a datepicker widget is a part * or a division, it has to be destroy as the html * for the widget is placed as html content inside that division, * and simply just removing the hasDatepicker class from that division * will cause the reinitializer to write in a second datepicker widget. * * In a division where it only contained the picker * object, it is faster to just set the HTML to blank * and remove the hasDatepicker class. On the otherhand, * for more complicated division, it is better to use, * the destroy option from "datepicker". */ datepicker2.val('').removeClass("hasDatepicker"); datepicker2.datepicker({ inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: date_diff + 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = datepicker1.datepicker('getDate'); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } dp3[1] = new Date(); dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra ); dp3[1] = dp3[1].toDateString(); // Destroy dp3 and re-initalize it. //$('#datepicker3').datepicker("destroy");
datepicker3.empty();
datepicker3.removeClass("hasDatepicker");
datepicker3.datepicker({
maxDate: max + date_diff + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]
|| date.toDateString() == dp3[1]
];
}
});
return max + date_diff + extra;
})(7)
});
}
datepicker1.datepicker({
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/* Initialize datepicker 3 here. */
// NOTE: If dp1 needed to be reinitialize dp3
// also have to be destroyed and reinitialize.
// The last day will always be a pick-able one...
// Because if it wasn't another day would had been added to it.
dp3[0] = new Date();
dp3[0].setDate( dp3[0].getDate() + max + extra );
dp3[0] = dp3[0].toDateString();
datepicker3.datepicker({
maxDate: max + extra,
beforeShowDay: function(date){
return [date.toDateString() == dp3[0]];
}
});
return max + extra;
})
(3)
});
datepicker1.change(dp2ini);
// Also trigger the change event.
datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change");
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
<div id="datepicker3"></div>
