Javascript date color

Alex_70

Utente Attivo
13 Nov 2018
371
14
18
HELL
Salve a tutti, devo dire che di Javascript ne capisco veramente poco, comunque ho trovato uno script in cui le date si colorano in questo modo

se e' precedente a oggi sono in rosso
se di oggi sono in arancione
se future, da domani in avanti sono in verde

sshot-1.png


lo adattato e funziona, vorrei pero' aggiungere il testo (colorato) a destra delle date

se precedenti aggiungere scaduto
se oggi aggiungere in scadenza
se future aggiungere ok

HTML:
<b>Javascript date color Scadenza affitto</b>
   
    <br>
   
    <table>
    <tr>
    <td>Casa 1: </td>
    <td>Scadenza: </td>
    <td>2014-08-17</td>
    </tr>
    <tr>
    <td>Casa 2: </td>
    <td>Scadenza: </td>
    <td>2015-02-13</td>
    </tr>
    <tr>
    <td>Casa 3: </td>
    <td>Scadenza: </td>
    <td>2020-05-28</td>
    </tr>
    <tr>
    <td>Casa 4: </td>
    <td>Scadenza: </td>
    <td>2020-05-29</td>
    </tr>
    <tr>
    <td>Casa 5: </td>
    <td>Scadenza: </td>
    <td>2020-06-12</td>
    </tr>
    <tr>
    <td>Casa 5: </td>
    <td>Scadenza: </td>
    <td>2020-08-03</td>
    </tr>
    </table>

JavaScript:
<script>
    var parents = document.getElementsByTagName("tr")

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children

    for (var j = 0, jj = children.length; j < jj; j++) {
        var elem = children[j]
        if (j % 3 === 2) {
            var dateElement = elem.innerHTML;
            var dateArray = dateElement.split("-");
            var prevTime = new Date(dateArray);
            var thisTime = new Date();
            var diff = prevTime.getTime() - thisTime.getTime();
            var days = 1000*60*60*24;
            var diffInDays = Math.ceil(diff / days);
            if (diffInDays < 0) {
                elem.style.color = "#ff0000";

            }
           
            else if (diffInDays > 0) {
                elem.style.color = "#008000";
            }
           
            else if (diffInDays <= 14) {
                elem.style.color = "#ffa500";
            }
        }
    }
}

</script>

Grazie
 

Tommy03

Utente Attivo
6 Giu 2018
614
58
28
18
Vicenza
Se ti va bene anche usando php puoi fare così:
PHP:
<?php
function dates($parametro){
$para=intval(strtotime($parametro));
$oggi=intval(strtotime("today"));
$domani=intval(strtotime("tomorrow"));
if($para < $oggi){
return "<span style='color:green;'>$parametro</span></td><td>(ok)";
}elseif($para > $domani){
return "<span style='color:red;'>$parametro</span></td><td>(Scaduto)";
}else{
return "<span style='color:orange;'>$parametro</span></td><td>(In scadenza)";
}
}
?>
<html>
<head>
</head>
<body>
<b>Javascript date color Scadenza affitto</b>
   
    <br>
   
    <table>
    <tr>
    <td>Casa 1: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2014-08-17');?></td>
    </tr>
    <tr>
    <td>Casa 2: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2015-02-13');?></td>
    </tr>
    <tr>
    <td>Casa 3: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2020-05-28');?></td>
    </tr>
    <tr>
    <td>Casa 4: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2020-05-29');?></td>
    </tr>
    <tr>
    <td>Casa 5: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2020-06-02');?></td>
    </tr>
    <tr>
    <td>Casa 5: </td>
    <td>Scadenza: </td>
    <td><?php echo dates('2020-08-03');?></td>
    </tr>
    </table>
    </body>
    </html>
 
Discussioni simili
Autore Titolo Forum Risposte Data
Daniele_Carrara [Javascript] Modifica input date Javascript 5
diego66 [Javascript] Calcolare giorni lavorativi comprese tra due date Javascript 0
J Helpful JavaScript Time and Date Picker, Plugins for Frameworks Javascript 0
J jsDatePick - A Simple Free Javascript Date Picker Javascript 0
U raggruppamento date con javascript Javascript 6
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1

Discussioni simili