Estoy trabajando en una aplicación de planificación de días y estoy usando Moments.js. Tengo una matriz de objetos y cada objeto tiene las horas y una actividad en blanco.
Estoy tratando de mostrar cada hora/actividad en la página que está funcionando, pero también estoy tratando de comparar las horas enumeradas con la hora actual y establecer el estilo en pasado/presente/futuro dependiendo de si la hora es anterior, posterior o posterior. igual a la hora actual. Estoy tratando de usar isBefore y isAfter pero no funciona.
Todo funciona, excepto que no puedo encontrar una manera de determinar si las 10 a. m. son antes o después de las 11 a. m., por ejemplo.
Aquí está mi código. Irá de 8 am a 5 pm, pero agregué objetos adicionales ya que ahora es tarde.
let mySched = [ { hour: '8 am', activity: '' }, { hour: '9 am', activity: '' }, { hour: '10 am', activity: '' }, { hour: '11 am', activity: '' }, { hour: '12 am', activity: '' }, { hour: '1 pm', activity: '' }, { hour: '2 pm', activity: '' }, { hour: '3 pm', activity: '' }, { hour: '4 pm', activity: '' }, { hour: '5 pm', activity: '' }, { hour: '06 pm', activity: '' }, { hour: '07 pm', activity: '' }, { hour: '08 pm', activity: '' }, { hour: '09 pm', activity: '' }, { hour: '10 pm', activity: '' }, { hour: '11 pm', activity: '' }, { hour: '12 pm', activity: '' } ] function whenIsNow(hour) { if (moment().isAfter(hour)) { return 'future'; } else if (moment().isBefore(hour)) { return 'past'; } else { return 'present'; } } for (let i = 0; i < mySched.length; i++) { let myHour = mySched[i].hour; let timeBlock = $( `<div class="col-12 time-block"> <div class="row"> <div id="${i}" class="col-12 col-md-2 hour">${myHour}</div> <div id="description" class="col-12 col-md-8 description ${whenIsNow(myHour)}"><textarea name="description">test</textarea></div> <div class="col-12 col-md-2 button"></div> </div> </div> </div>` ) let schedTime = $(`#${i}`); schedTime.append(myHour); plannerEl.append(timeBlock); }Sugiero ENCARECIDAMENTE no almacenar la hora en formato de cadena y utilizar el formato de 24 horas para la codificación. Luego convierta el valor mostrado a ampm
let mySched = [ "Activity at midnight", "Activity at 1am", "Activity at 2am", "Activity at 3am", "Activity at 4am", "Activity at 5am", "Activity at 6am", "Activity at 7am", "Activity at 8am", "Activity at 9am", "Activity at 10am", "Activity at 11am", "Activity at 12am", "Activity at 1pm", "Activity at 2pm", "Activity at 3pm", "Activity at 4pm", "Activity at 5pm", "Activity at 6pm", "Activity at 7pm", "Activity at 8pm", "Activity at 9pm", "Activity at 10pm", "Activity at 11pm" ]; const nowHour = new Date().getHours() const ampm = num => num > 12 ? `${num-12}pm` : `${num}am` const whenTime = (hour,when) => { if (hour < when) return "past"; if (hour === when) return "now"; return "future" }; $("#planner").html(mySched.map((shed,i) => `<div class="col-12 time-block"> <div class="row"> <div id="${ampm(i)}" class="col-12 col-md-2 hour">${i === 0? 'midnight' : ampm(i)}</div> <div id="description" class="col-12 col-md-8">${whenTime(i,nowHour)} <textarea name="description">${shed}</textarea></div> <div class="col-12 col-md-2 button"></div> </div> </div> </div>`).join("") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="planner"></div>Esto es lo que terminé haciendo.
// get the current day let myDay = moment().format("dddd, MMMM Do YYYY"); // target current day div let currentDayEl = $('#currentDay'); // Append the date to current day div currentDayEl.append(myDay); // target the container let containerEl = $('.container'); let mySched = []; // get the current hour let currHour = (moment().get('hour')); // function to check if the the //current hour is before, after, or the same as // each hour of the planner and setting the // past, present, or future class to the event function whenIsNow(hour) { // this is the hour passed to the function let myHour = (moment(parseInt(hour))); // compare the hour passed in to the current hour // and set the class acordingly if (myHour.isSame(currHour)) { return 'present'; } else if (myHour.isBefore(currHour)) { return 'past'; } else if (myHour.isAfter(currHour)) { return 'future'; } } // function to convert hour displayed to 12 hour time // and add am or pm. function convertTime(myHour) { if (myHour > 0 && myHour <= 12) { myHour = myHour + 'am'; } else if (myHour > 12) { (myHour = myHour - 12 + 'pm'); } else if (myHour == 0) { myHour = 12 + 'am'; } return myHour; } // count from 9-18 and create each time block for (let i = 9; i < 18; i++) { // get event[i] from local storage let currentEvent = localStorage.getItem(i); // if the current event is null set currentEvent to '' if (currentEvent == null) { currentEvent = ''; } // create the timeBlocks let timeBlock = $( `<div class="row"> <div id="${i}" class="col-1 d-flex justify-content-center hour">${convertTime(i)}</div> <div id="description" class="col-9 description ${whenIsNow(i)}"><textarea class="myText">${currentEvent}</textarea></div> <div class="col-2 pl-0"><button class="btn btn-lg saveBtn"><i class="far fa-save"></i></button></div> </div>` ); // append time blocks to container element containerEl.append(timeBlock); }