No puedo capturar el valor seleccionado
Publicado por Cristian (5 intervenciones) el 11/01/2019 19:23:12
Hola a todos:
Les cuento, tengo un calendario hecho con javascript y html, ahora quiero intentar tomar el numero correspondiente del día seleccionado. Cuando el calendario genera el primer mes, puedo seleccionar el día sin problemas, pero si cambio el mes del calendario ya no puedo obtener el valor seleccionado.
este es el javascript
este es el html
De antemano gracias :)
Les cuento, tengo un calendario hecho con javascript y html, ahora quiero intentar tomar el numero correspondiente del día seleccionado. Cuando el calendario genera el primer mes, puedo seleccionar el día sin problemas, pero si cambio el mes del calendario ya no puedo obtener el valor seleccionado.
este es el javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
var currentDate = new Date();
var currentDay = currentDate.getDate();
var monthNumber = currentDate.getMonth();
var esteMes = monthNumber;var currentYear = currentDate.getFullYear();
var dates = document.getElementById('dates');
var month = document.getElementById('month');
var year = document.getElementById('year');
var prevMonthDOM = document.getElementById('prev-month');
var nextMonthDOM = document.getElementById('next-month');
month.textContent = monthNames[monthNumber];
year.textContent = currentYear.toString();
prevMonthDOM.addEventListener('click', function () {
return lastMonth();
});
nextMonthDOM.addEventListener('click', function () {
return nextMonth();
});
writeMonth(monthNumber);
function writeMonth(month) {
for (var i = startDay(); i > 0; i--) {
dates.innerHTML += ' <div class=" calendar__last-days">\n ' + (getTotalDays(monthNumber - 1) - (i - 1)) + '\n</div>';
}for (var _i = 1; _i <= getTotalDays(month); _i++) {
if (_i === currentDay && monthNames[esteMes]== monthNames[month] ) {
console.log(monthNames[month]);
console.log(monthNames[esteMes]);
dates.innerHTML += ' <div class="calendar__date calendar__item calendar__today">' + _i + '</div>';
} else {
dates.innerHTML += ' <div class="calendar__date calendar__item">' + _i + '</div>';
} }}function getTotalDays(month) {
if (month === -1) month = 11;
if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
return 31;
} else if (month == 3 || month == 5 || month == 8 || month == 10) {
return 30;
} else {
return isLeap() ? 29 : 28;
}}function isLeap() {
return currentYear % 100 !== 0 && currentYear % 4 === 0 || currentYear % 400 === 0;
}function startDay() {
var start = new Date(currentYear, monthNumber, 1);
return start.getDay() - 1 === -1 ? 6 : start.getDay() - 1;
}function lastMonth() {
if (monthNumber !== 0) {
monthNumber--;
} else {
monthNumber = 11;currentYear--;
}setNewDate();
}function nextMonth() {
if (monthNumber !== 11) {
monthNumber++;
} else {
monthNumber = 0;currentYear++;
}setNewDate();
}function setNewDate() {
currentDate.setFullYear(currentYear, monthNumber, currentDay);
month.textContent = monthNames[monthNumber];
year.textContent = currentYear.toString();
dates.textContent = "";
writeMonth(monthNumber);
}este es el html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<title>Calendario Interactivo jaja</title>
</head>
<body>
<div class="contenedor__general">
<h1 class="title">Calendario ql</h1>
<div class="grid__calendario">
<div class="calendar">
<div class="calendar__info">
<div class="calendar__prev" id="prev-month">◀</div>
<div class="calendar__month" id="month"></div>
<div class="calendar__year" id="year"></div>
<div class="calendar__next" id="next-month">▶</div>
</div>
<div class="calendar__week">
<div class="calendar__day ">Lun</div>
<div class="calendar__day ">Mar</div>
<div class="calendar__day ">Mie</div>
<div class="calendar__day ">Jue</div>
<div class="calendar__day ">Vie</div>
<div class="calendar__day ">Sab</div>
<div class="calendar__day ">Dom</div>
</div>
<div class="calendar__dates" id="dates">
</div>
</div>
<div class="agendar__hora">
<h2>selecciona el día que mas te acomoda.</h2>
<div class="formulario">
<form action="" id="agendarCita">
<label for="">Nombre:</label>
<input type="text" name="nombre" id="nombre">
<label for="">Apellidos</label>
<input type="text" name="apellido" id="apellido">
<label for="">Email:</label>
<input type="email" name="email" id="email">
<label for="">Número de contacto</label>
<input type="tel" id="telefono" name="telefono">
<input type="Submit" value="Agendar" id="enviar" class="btn ">
</form>
<div class="horas" id="horas">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/scripts-dist.js" charset="utf-8"></script>
<script src="js/bootstrap.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.calendar__item').on("click", function() {
let day = $(this).html();
console.log(day);
})
});
</script>
</body>
</html>
De antemano gracias :)
Valora esta pregunta
-1