Soy completamente nuevo en programación/desarrollo web.
Lo que estoy tratando de hacer: estoy tratando de escribir JavaScript que tomará la fecha de una página web o una hoja de cálculo en línea y cambiará el color del texto o el fondo de la celda. El cambio de color se basará en si la fecha tomada del elemento HTML o la hoja de cálculo en línea está dentro de los 14 o 30 días a partir de la fecha actual.
Aquí hay una muestra de elementos html en los que me gustaría trabajar. Puse las fechas en varios formatos para intentar trabajar con ellas.
El Javascript que he escrito hasta ahora lo estoy publicando aquí porque puedo hacer que los elementos cambien de color, pero no creo que el cambio se base realmente en la cantidad de días y no puedo comparar la cantidad de días que quiero. .
const now = new Date().toDateString(); const date1 = document.getElementById('test1').innerText; for (let i = 0; i <= test.length; i++) { i += test[i]; if (date1 <= now) console.log('safe'); if (date1 >= now) document.getElementsByClassName('test')[0].style.color = 'purple'; }; <div class='test'> <p id="test1">February 22 2022</p> <br> <p id="test">17/2/2022</p> <br> <p id="test">17 3 2022</p> <br> <p id="test">17 4 2022</p> <br> </div>dd/mm/yyyy , dd mm yyyy , Mmm(...) dd yyyy const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] const now = new Date(); document.querySelectorAll('.test p').forEach(p => { const dString = p.textContent; let [date, month, year] = dString.split(/[ \/]/) const textMonth = months.indexOf(date.slice(0, 3)) if (textMonth != -1) { // we found a month name date = month month = textMonth } else month -= 1; const d = new Date(year, month, date) console.log(d, d <= now) p.classList.toggle("safe", !isNaN(d) && d <= now) p.classList.toggle("unknown", isNaN(d)) p.classList.toggle("unsafe", !isNaN(d) && d > now) }) .safe { color: green; } .unsafe { color: purple; } .unknown { color: red; } <div class='test'> <p>February 22 2022</p> <br> <p>17/1/2022</p> <br> <p>17/2/2022</p> <br> <p>17 3 2022</p> <br> <p>17 4 2022</p> <br> <p>17 4 2025</p> <br> </div>En lugar de convertirlos en cadenas, puede usar los objetos de fecha directamente para la comparación y el constructor de Fecha puede tomar una cadena como entrada y convertirla en un objeto.
Prueba algo como esto:
const now = new Date(); const dates = document.getElementsByTagName('p'); for (d of dates) { let dateString = d.innerText; let dateObj = new Date(dateString); if (dateObj < now) console.log(`${dateObj} is older`); else console.log(`${dateObj} is today or newer`); }; <div class="test"> <p>February 22 2022</p> <br> <p>2/22/2022</p> <br> <p>2021 2 17</p> <br> </div>Editar: ¡Gracias por la idea sobre los fragmentos! No sabía mucho sobre esa característica. También descubrí que JS no entiende DD/MM/YYYY, donde MM es 2 o 02 :(
También actualicé un poco el código con otras sugerencias aquí y, con suerte, un ejemplo más comprensible.
Si está utilizando una aplicación de una sola página, instale la biblioteca moment.js (npm I moment) o si está utilizando HTML javascript, agregue moment.js CDN
El siguiente código es solo una muestra de su problema lógico
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <div id="Reset"> <button>Check date is under 30 days</button> </div> <script> $(document).ready(function () { $("#Reset").click(function () { /* $.get("https://jsonplaceholder.typicode.com/todos", function (data) { console.log(data); alert("Load was performed."); }) */ let curretDate = new Date(); let dateToCheck = new Date("01/12/2022"); let date_of_30_subtract = moment(curretDate).subtract(30, 'days'); console.log(moment(dateToCheck).isBetween(date_of_30_subtract,curretDate )) }); }); </script> </body> </html>Puedes establecer antes de qué fecha tienes que consultar 14 o 30 días. Thant restará esos días y obtendrá la fecha después de la resta.