1

Hola necesito obtener el valor de la etiqueta data-cal-date dentro del span al hacer click en la clase cal-month-day.

introducir la descripción de la imagen aquí

Lo que tengo de codigo es esto que me trae el valor pero el del primer div que es = "2021-12-28"

$('.cal-month-day').click(function(){ 
    dia = $('.cal-month-day span').attr('data-cal-date');
   alert(dia);
});

lo que no puedo hacer es que por ej la hacer click en el dia 5 me traiga "2022-01-05" introducir la descripción de la imagen aquí

5
  • Si quieres ayuda más rápida te recomiendo que peges el código en forma de texto, sino nos obligas a reproducirlo a mano, y depende de lo perezosos que estemos te ayudaremos o no. Mírate Cómo preguntar y Cómo crear un ejemplo mínimo, completo y verificable
    – masterguru
    Commented el 5 ene. 2022 a las 17:32
  • Lectura recomendada es.meta.stackoverflow.com/a/2869/65107 Commented el 5 ene. 2022 a las 17:39
  • 2
    Creo que te confundes... no somos tus empleados. No vienes aquí a decirnos qué quieres/necesitas, si no a decirnos qué hiciste y no funcionó para ver si podemos ayudarte a que funcione. Es un detalle muy importante, ese de añadir el código de lo que has intentado hacer y qué problema tienes.
    – Benito-B
    Commented el 5 ene. 2022 a las 17:43
  • Perdón a todos, ahora si esta mas completa la pregunta.
    – Andrés
    Commented el 5 ene. 2022 a las 17:55
  • 1
    Gracias, ahora está mejor, pero estaria aún mejor si no usaras imágenes para ningún tipo de código, incluido el HTML del principio (si, lo se, somos tikis-mikis, pero es por el bien de todos, incluido el tuyo)
    – masterguru
    Commented el 5 ene. 2022 a las 17:58

2 respuestas 2

4

Usando jquery deberias probar esto.

Sustituye esto:

dia = $('.cal-month-day span').attr('data-cal-date');

por esto

dia = $(this).find('span').attr('data-cal-date');

En este snippet lo puedes ver funcionando:

$('.cal-month-day').click(function(){ 
   dia = $(this).find('span').attr('data-cal-date');
   console.log(dia);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="call-cell1 call-cell">
  <div class="cal-month-day">
    <span data-cal-date="2022-01-07">7</span>
  </div>
</div>
<div class="call-cell1 call-cell">
  <div class="cal-month-day">
    <span data-cal-date="2022-01-08">8</span>
  </div>
</div>
<div class="call-cell1 call-cell">
  <div class="cal-month-day">
    <span data-cal-date="2022-01-09">9</span>
  </div>
</div>
<div class="call-cell1 call-cell">
  <div class="cal-month-day">
    <span data-cal-date="2022-01-10">10</span>
  </div>
</div>
<div class="call-cell1 call-cell">
  <div class="cal-month-day">
    <span data-cal-date="2022-01-11">11</span>
  </div>
</div>

Ya nos diras si lo has podido implementar en tu código.

1
  • gracias me funciono perfecto!
    – Andrés
    Commented el 6 ene. 2022 a las 19:41
1

Utiliza la función querySelectorAll para recorrer todos los nodos que buscas, luego con dataset obtienes los datos del atributo data-*.

document.querySelectorAll(".cal-month-day")
    .forEach(btn => {
         btn.addEventListener('click', (event) => {
         var dia = event.target.dataset.calDate;
         console.log(dia)
     });
});

Ver código funcionando en https://jsfiddle.net/k0qrcj6u/

Importante saber que cuando usas data-* los guiones se comportan como camelcase, por eso no queda dataset.cal-date, si no que queda como dataset.calDate.

Ojo esto es vanilla javascript(js puro), no Jquery.

2
  • 1
    Seguramente contestaste antes de saber que hay varios cal-month-day. Tu solución no funciona con varios porque querySelector solo coge el primero que ve.
    – masterguru
    Commented el 5 ene. 2022 a las 18:43
  • gracias, ahí lo corregí.
    – jsanbae
    Commented el 5 ene. 2022 a las 19:11

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.