Highlight weekends from a date range - Javascript

Asked

Viewed 310 times

0

I’m trying to highlight the weekends from a date gap. I provide the initial and final date and the script generates a sequence of dates within inputs that already exist. I could only do it with the help of the people here, so again I ask for help.

I’m trying to use IF(var day == 6), so it changes the background of input q is the weekend.

<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>

Thanks qq help.

javascript date

2 answers

1


I took the liberty of removing unnecessary code, you may need it for another feature, but the code does exactly what you want. What I did was every iteration of is check if the date was a weekend. 

 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>

  • Thanks. but it keeps going wrong. At the first run of right, but from the moment q I change the start date, it marks days q n are Saturday and Sunday. It is as if the for loop confuses the id’s and ends up putting the blue background in the id’s that were weekend in the previous interval. Change the value of the first input q vc will understand what q to saying. But I know your logic is right. It’s just a detail. Thank you

  • you’re right, I didn’t realize, I modified parachuting work properly now. take the test and make sure it’s bandstand now.

  • Thank you very much msm. It’s perfect. It’s great. Pd tell me why he was making the mistake? I didn’t understand.

  • Yes, as you are putting the background in the input it is necessary to remove, for this reason the else after the if, because it stays in memory.

0

The getDay() method returns the day of the week (0-6) for the specified date.

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';  
    }

Example:

 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 will carry error because it is larger than the number of inputs. Review the value of this variable or the number of inputs of the form. For example effect set it with value 10 to better visualize the execution of this example.

  • Thank you again. I know the logic is right, but it’s not working. He is rethinking the value of INPUT(06/01/2018) and changing the color of tds inputs.

  • Hello again. I set the value of the total p 11 p to equal the amount of inputs. And yet n solved problem. If you change the value of the start date as in the example, you will notice that it is marked days of the week tb. No classification criteria. But it’s helped a lot. It’s this way. I’m just not getting it right.

Browser other questions tagged javascript date

You are not signed in. Login or sign up in order to post.