Highlight weekends for a date range - Javascript

Question

Highlight weekends for a date range - Javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to highlight the weekends for a date range. I supply the start and end date, and the script generates a sequence of dates between inputs that already exist. I just did it with the help of the people here, so I ask for help again.

I'm trying to use the IF (var day == 6), so it changes the background of the input that's on 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 for your help.

javascript date

asked by anonymous 03.01.2019 / 23:06

2 answers

0

The getDay () method returns the day of the week (0-6) to 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><formmethod="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 cause error because it is greater than the number of inputs. Review the value of this variable or the number of inputs of the form. For example, it has a value of 10 to better visualize the execution of this example.

04.01.2019 / 02:03

How to get the grandfather of a term in taxonomy in Wordpress? Expand column Excel Apache POI

score 1 · Accepted Answer

I took the liberty of removing unnecessary codes, you might need other functionality, but the code does exactly what you want. What I did was with each iteration of the to 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>