4

Quisiera mostrar al usuario un calendario pequeño, que visualice la semana actual donde estamos ubicados. Así:

introducir la descripción de la imagen aquí

Mas o menos así lo quiero en un array: Lun:19,mar:20,mier:21,jue:22,vier:23,sab:24,Dom:25.

Solo quisiera obtener el numero del día y el día de la semana actual y no tengo ni la remota idea de hacerlo alguien podría ayudarme?.

3 respuestas 3

5

Pues puedes obtenerlo con la funcion getDay().

Ejecuta el siguiente ejemplo:

var meses = new Array ("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
        var dias = new Array('domingo','lunes','martes','miercoles','juev es','viernes','sabado')
        var f=new Date();
        document.write("Hoy es:"+dias[f.getDay()]+" "+f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear()+" y ");
        
        f.setDate(f.getDate() - f.getDay());//seteamos al primer dia de la semana
        
        document.write("El primer dia de la semana es:"+dias[f.getDay()]+" "+f.getDate() + " de " + meses[f.getMonth()] + " de " + f.getFullYear());

y si deseas seguir dia a dia solo haces f.setDate(f.getDate() +1);

6
  • Eso mismo pero para todos los días de la semana actual de lunes a domingo tienes alguna idea para eso? Commented el 24 mar. 2018 a las 21:29
  • @DiegoLopez, Pues si te funciono, puedes marcarlo como respuesta para asi ayudar a otras personas que tambien buscas esta solucion.
    – Shassain
    Commented el 24 mar. 2018 a las 21:31
  • no entiendo ahi esta la respuesta
    – Shassain
    Commented el 24 mar. 2018 a las 21:40
  • Me traes el día de hoy y el numero del día, listo hay esta bien pero necesito que lo haga con todos los días de la semana a la vez que me de un array con el numero del día lunes de esta semana y asi sucesivamente hasta el domingo . Commented el 24 mar. 2018 a las 21:46
  • @DiegoLopez, ya edite mi respuesta, haber si esa si te sirve
    – Shassain
    Commented el 24 mar. 2018 a las 23:23
1

Una vez has obtenido el Lunes de la Semana actual sólo tienes que iterar 7 días y mapear tus valores.

// Obtener Lunes de la Semana actual
const date = (() => {
  const now = new Date();
  return new Date(now.setDate(now.getDate() - now.getDay() - -1));
})();
// Recorrer la semana
const week = Array(7).fill(date).map((date, i) => {
  if (i !== 0) {
    date.setDate(date.getDate() + 1);
  }
  const name = date.toLocaleDateString('es-ES', { weekday: 'short' });
  return { 
    [name[0].toUpperCase()]: date.getDate()
  };
});

console.log(week);

2
  • Esto esta mas que excelente! aunque tengo una pregunta, ya hoy es lunes pero sigue mostrando la semana pasada ¿porque? Commented el 26 mar. 2018 a las 13:27
  • Se se calculaba correctamente el día de la semana en otras casuísticas, ahora ya está.
    – dddenis
    Commented el 26 mar. 2018 a las 13:58
-1

Creo que lo que quieres es algo así:

$(function () {
    $("#date").datepicker({
        //In Datepicker set the Calendar display start with Monday
        firstDay: 1,
        //Before Populating the Calendar set the Enabled & Disabled Dates using beforeShowDay(Date) function
        beforeShowDay: function (date) {
            //var monday = new Date("June 1, 2013 00:00:00");
            //Get today's date
            var monday = new Date();
            //Set the time of today's date to 00:00:00 
            monday.setHours(0,0,0,0);
            /*
            Below Line sets the Date to Monday (Start of that Week)
            (monday.getDay() || 7) returns the value of getDay() 
            ie., [ 1 - Mon, 2 - Tue, 3 - Wed, 4 - Thu, 5 - Fri, 6 - Sat ]  
            except for Sunday where it returns 7. 
            The return value is used to calculate the Date of that Week's Monday
            */
            monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));
            //Set the Date to Monday
            var sunday = new Date(monday);
            //Now add 6 to Monday to get the Date of Sunday (End of that Week)
            sunday.setDate(monday.getDate() + 6);
            //Now return the enabled and disabled dates to datepicker            
            
            return [(date >= monday && date <= sunday), ''];
        }
    });
    //Set the date format to dd/mm/yy ie., 30/10/1989
    $("#date").datepicker("option", "dateFormat", "dd/mm/yy");
});
.ui-datepicker-unselectable{
  display:none;
  }
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
  
  <div id="date"></div>

He cogido esta versión modificada y he ocultado las filas deshabilitadas, así sólo tienes la semana actual del mes. Habría que hacer más pruebas pero creo que es un buen punto de partida.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.