django jquery month picker - a data "até" nem sempre é atualizada depois de "from" date
Eu segui o exemplo neste post:jquery datetime picker set minDate dinâmico.
Eu tentei 2 maneiras:
Primeiro método
esse método funciona apenas pela PRIMEIRA VEZ, selecionando a data "até". Ou seja, depois de selecionar uma vez "de" e "até" data, volto a selecionar novamente a data "de" e, em seguida, a data "para" não muda de acordo, permanece como a primeira vez que escolheu:
$('.to').datepicker({
beforeShow: function(input, inst) {
var mindate = $('.from').datepicker('getDate');
$(this).datepicker('option', 'minDate', mindate);
}
});
html: para selecionar no calendário de datas "de"
<script type="text/javascript">
$(function() {
$('.from').datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
</script>
Eu coloquei nohttps://jsfiddle.net/3w3h097c/ . No violino, o calendário suspenso não aparece, não sei por que, mas, de fato, aparece no meu navegador.
para selecionar do calendário de datas "a"
A única diferença em comparação à seleção do calendário de datas "de" é adicionar as 2 frases a seguir:
beforeShow : function(input, inst) {
var mindate = $('.from').datepicker('getDate'); // Added sentence, the rest same
$(this).datepicker('option', 'minDate', mindate); //>Added sentence,the rest same
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
......
Segundo método - não funciona de todo
Adicione uma função "onSelect: (selecionada)" para "de" e "para".
<---from--->
$(function() {
$('.from').datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
<!--add onSelect here---->
onSelect: function(selected) {
$(".to").datepicker("option","minDate", selected)
},
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.from').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$(".ui-datepicker-calendar").hide();
}
}
})
});
<!--to:-->
$(function() {
$('.to').datepicker(
........
onSelect: function(selected) {
$('.from').datepicker("option","maxDate", selected)
},
.......