0

Estou tentando destacar os finais de semana de um intervalo de datas. Forneço a data inicial e final e o script gera uma sequencia de datas dentro de inputs q já existem. Eu só consegui fazer com a ajuda do pessoal daqui, então de novo peço ajuda.

Estou tentando usar o IF(var dia == 6), então ele alterar o background do input q tá o final de semana.

<script type="text/javascript" >
 function calcular() {     
    /* Separa os valores */
    let dataStringi = $("#dti").val().split("/");
    let dataStringf = $("#dtf").val().split("/");
    /* Define a data com os valores separados */
    let dti = new Date(dataStringi[2], dataStringi[1]-1, dataStringi[0]);
    let dtf = new Date(dataStringf[2], dataStringf[1]-1, dataStringf[0]);

    var date1 = new Date(dti);
    var date2 = new Date(dtf);
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var total = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

    var hoje=new Date(dti);
    var dia= hoje.getDay();

    var semana=new Array(6);

    semana[0]='Domingo';
    semana[1]='Segunda-Feira';
    semana[2]='Terça-Feira';
    semana[3]='Quarta-Feia';
    semana[4]='Quinta-Feira';
    semana[5]='Sexta-Feira';
    semana[6]='Sábado';

    var start = new Date(dti);
    /* É AQUI QUE TENTO USAR O IF. MAS N SEI COMO IDENTIFICAR O VALOR DA DATA COM O INPUT RESPECTIVO.  
    if(document.getElementById("dti"+0).value==semana[6]){
           document.getElementById("dti"+0).style.backgroundColor = 'blue';  
    } */

    for (var i = 0; i <= total; i++) 
    {    
        document.getElementById("dti"+i).value =start.toLocaleDateString('pt-BR');      
        var newDate = start.setDate(start.getDate() + 1);
        start = new Date(newDate);
    }
    total++;//para incluir o primeiro dia        
 }
</script>

<body onload="diasemana()">
  <form method="POST" action="teste.php">
    <input type="text"  name="dti0" id="dti" value="05/01/2019" autocomplete="off"/><br>
    <input type="text"  name="dti1" id="dtf" value="10/03/2018" onblur="calcular()"autocomplete="off"/><br><br><br>

    <input type="text"  value="DATA" name="dti0" id="dti0" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti1" id="dti1" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti2" id="dti2" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti3" id="dti3" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti4" id="dti4" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti5" id="dti5" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti6" id="dti6" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti7" id="dti7" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti8" id="dti8" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti9" id="dti9" autocomplete="off"/><br>
    <input type="text"  value="DATA"  name="dti10" id="dti10"  autocomplete="off"/><br>
  </form>
</body>

Agradeço qq ajuda.

0

2 Respostas 2

1

Eu tomei a liberdade de retirar códigos desnecessário, pode ser que você precise pra outra funcionalidade, mas o código faz exatamente o que você deseja. O que eu fiz foi a cada iteração do for verificar se a data era um final de semana.

 function calcular() {  
    /* Separa os valores */
    let $ = document.querySelector.bind(document)
    let dataStringi = $("#dti").value.split("/");
    let dataStringf = $("#dtf").value.split("/");
    /* Define a data com os valores separados */
    let dti = new Date(dataStringi[2], dataStringi[1]-1, dataStringi[0]);
    let start = new Date(dti);

    for (let i = 0; i <= 10; i++) {    
     $(`#dti${i}`).value =start.toLocaleDateString('pt-BR');                   
     if(start.getDay() == 6 || start.getDay() == 0){
        $(`#dti${i}`).style.backgroundColor = 'blue';                
      }else{
       $(`#dti${i}`).style.backgroundColor = 'white'; 
       }
      const tempDate = start.setDate(start.getDate() + 1);
      start = new Date(tempDate);
    }    
 }
 <form method="POST" action="teste.php">
    <input type="text"  name="dti0" id="dti" value="05/01/2019" autocomplete="off"/><br>
    <input type="text"  name="dti1" id="dtf" value="10/03/2018" onblur="calcular()"autocomplete="off"/><br><br><br>

    <input type="text"  value="DATA" name="dti0" id="dti0" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti1" id="dti1" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti2" id="dti2" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti3" id="dti3" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti4" id="dti4" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti5" id="dti5" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti6" id="dti6" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti7" id="dti7" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti8" id="dti8" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti9" id="dti9" autocomplete="off"/><br>
    <input type="text"  value="DATA"  name="dti10" id="dti10"  autocomplete="off"/><br>
  </form>

4
  • Obrigada. Mas continua dando errado. Na primeira execução da certo, mas a partir do momento q eu mudo a data inicial, ele marca dias q n são sabado e domingo. É como se o loop do for confundisse os id's e acaba colocado o fundo azul nos id's que foram final de semana no intervalo anterior. Altere o valor do primeiro input q vc vai entender o q to dizendo. Mas eu sei q a sua lógica tá certa. É só um detalhe. Obrigada
    – user134594
    4/01/2019 às 3:47
  • tem razão, eu não tinha percebido, modifiquei paraquedismos funcione corretamente agora. faça o teste e verifique se está coreto agora. 4/01/2019 às 3:53
  • Muito obrigada msm. Tá perfeito. Ficou ótimo. Pd me dizer pq ele tava fazendo o erro? Eu n entendi.
    – user134594
    4/01/2019 às 3:57
  • Sim, como você está colocando o background no input é necessário retirar, por esse motivo o else depois do if, porque fica na memória. 4/01/2019 às 4:17
0

O método getDay() retorna o dia da semana (0-6) para a data especificada.

var start = new Date(dti);

for (var i = 0; i <= total; i++) 
{    
    document.getElementById("dti"+i).value =start.toLocaleDateString('pt-BR'); 
    //retorna o nome do dia da semana
    if(semana[start.getDay()]==semana[6]){
      document.getElementById("dti"+i).style.backgroundColor = 'blue';  
    }   

Exemplo:

 function calcular() {     
    /* Separa os valores */
    let dataStringi = $("#dti").val().split("/");
    let dataStringf = $("#dtf").val().split("/");
    /* Define a data com os valores separados */
    let dti = new Date(dataStringi[2], dataStringi[1]-1, dataStringi[0]);
    let dtf = new Date(dataStringf[2], dataStringf[1]-1, dataStringf[0]);

    var date1 = new Date(dti);
    var date2 = new Date(dtf);
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    //var total = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

    var total = 10;

    var hoje=new Date(dti);
    var dia= hoje.getDay();

    var semana=new Array(6);

    semana[0]='Domingo';
    semana[1]='Segunda-Feira';
    semana[2]='Terça-Feira';
    semana[3]='Quarta-Feia';
    semana[4]='Quinta-Feira';
    semana[5]='Sexta-Feira';
    semana[6]='Sábado';

    var start = new Date(dti);

for (var i = 0; i <= total; i++) 
{    
    document.getElementById("dti"+i).value =start.toLocaleDateString('pt-BR'); 
    //retorna o nome do dia da semana
    if(semana[start.getDay()]==semana[6]){
      document.getElementById("dti"+i).style.backgroundColor = 'blue';  
    }  
        
   
        var newDate = start.setDate(start.getDate() + 1);
        start = new Date(newDate);
    }
    total++;//para incluir o primeiro dia        
 };
 
 calcular();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="teste.php">
    <input type="text"  name="dti0" id="dti" value="05/01/2019" autocomplete="off"/><br>
    <input type="text"  name="dti1" id="dtf" value="10/03/2018" onblur="calcular()"autocomplete="off"/><br><br><br>

    <input type="text"  value="DATA" name="dti0" id="dti0" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti1" id="dti1" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti2" id="dti2" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti3" id="dti3" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti4" id="dti4" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti5" id="dti5" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti6" id="dti6" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti7" id="dti7" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti8" id="dti8" autocomplete="off"/><br>
    <input type="text"  value="DATA" name="dti9" id="dti9" autocomplete="off"/><br>
    <input type="text"  value="DATA"  name="dti10" id="dti10"  autocomplete="off"/><br>
  </form>

Essse total vai acarretar erro porque é maior que o numero de inputs. Reveja o valor dessa variavel ou o numero de inputs do form. Para efeito de exemplo setei ele com valor 10 para melhor visualizar a execução desse exemplo.

2
  • Novamente obrigada. Eu sei q a lógica tá certa, mas não ta dando certo. Ele tá repedindo o valor do INPUT(06/01/2018) e alterando a cor de tds os inputs.
    – user134594
    4/01/2019 às 1:16
  • Olá novamente. Setei o valor do total p 11 p ficar igual a quantidade de inputs. E ainda n resolvi problema. Se vc alterar o valor da data inicial como no exemplo, vai perceber q ele tá marcado dias da semana tb. Sem criterio de classificação. Mas já ajudou muito. É nesse rumo. Só n to acertando.
    – user134594
    4/01/2019 às 2:05

Você deve fazer log-in para responder a esta pergunta.