Two fields with filter in the second - Datepicker

Navigation
0

Hello stackOverflow family

I'm finalizing a project and I'm having problems with datepicker. I have two datepicker fields (calendar and calendar1), working perfectly, but I need the field "calendar1" to present dates from the date field of the "calendar" field. Could I make myself understood?

In short: the calendar field is chosen 14-01-2018 and the date options in calendar1 should be from 15-01-2018

Follow the datepicker 

<script>
$(function() {
    $( "#calendario" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: false,
        numberOfMonths: 2,
        maxDate: '-1d +12m',
        minDate: '+1d',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
    $( "#calendario1" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: false,
        numberOfMonths: 2,
        maxDate: '-2d +12m',
        minDate: '+3d',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});
</script>
    
asked by anonymous 23.02.2018 / 18:03

1 answer

1

To set an initial date in jQuery Datepicker , use 

minDate: new Date(ano, mês, dia)

And to change the ownership of a input with Datepicker, you use: 

$(seletor).datepicker("option", {propriedade: novo_valor} );

To detect a change on a date, you use the onSelect method: 

onSelect: function(){
   executar algum código
}

Then, to change the start date of the second input #calendario1 , we use the onSelect in the first input by passing the selected date in the function and taking the values (day, month and year): 

onSelect: function(dia){
   var dia = dia.split("-").map(Number),
       d = dia.pop()+1,
       m = dia[1]-1,
       a = dia.shift();
   $("#calendario1").datepicker("option", {minDate: new Date(a, m, d)} );
}

Edit: I added a .val('') to empty and reset the second input .

Example (see comments in code): 

$(function() {
    $( "#calendario" ).datepicker({
      onSelect: function(dia){ // o parâmetro "dia" é a data selecionada
         var dia = dia.split("-").map(Number), // quebro a data em array com números inteiros
             d = dia.pop()+1, // pego o dia seguinte ao selecionado
             m = dia[1]-1, // pego o mês selecionado -1 (é preciso subtrair por 1 porque o retorno é um mês a frente)
             a = dia.shift(); // pego o ano selecionado
         $("#calendario1").val('').datepicker("option", {minDate: new Date(a, m, d)} );
      },
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: false,
        numberOfMonths: 2,
        maxDate: '-1d +12m',
        minDate: '+1d',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
    $( "#calendario1" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: false,
        numberOfMonths: 2,
        maxDate: '-2d +12m',
        minDate: '+3d',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><inputtype="text" id="calendario" >
<input type="text" id="calendario1" >
    
23.02.2018 / 19:08
: hover does not work When I load my App class is not recognized