1

Necesito hacer un código que me lea la fecha que el usuario seleccione, mediante un calendario hecho con Boostrap, el detalle es que no encuentro manera para lograr mi cometido. Anexo código que llevo actualmente:

Traer datos de calendario:

function calendar(){
    var mes = document.getElementByID('month');
    var contenido-mes = parrafo.innerHTML;
    var dia = document.getElementByClass('day-contents');
    var contenido-dia = parrafo.innerHTML;
}

Función incompleta de AJAX:

function iniciar(){
    if(window.XMLHttpRequest)
        peticionHTTP = new XMLHttpRequest();
    else peticionHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
 function peticion(url, metodo, funcion){
    peticionHTTP.onReadyStateChange = funcion;
    peticionHTTP.open(metodo, url, true);
    peticionHTTP.send(null);
}

Código calendario:

<div class="col_1">
        <div class="col-md-4 span_7">   
          <div class="cal1 cal_2">
            <div class="clndr">
                <div class="clndr-controls">
                    <div class="clndr-control-button">
                        <p class="clndr-previous-button">previous</p>
                    </div>
                    <div id="month" class="month">July 2015</div>
                    <div class="clndr-control-button rightalign">
                        <p class="clndr-next-button">next</p>
                    </div>
                </div>
                    <table class="clndr-table" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr class="header-days">
                                <td class="header-day">S</td>
                                <td class="header-day">M</td>
                                <td class="header-day">T</td>
                                <td class="header-day">W</td>
                                <td class="header-day">T</td>
                                <td class="header-day">F</td>
                                <td class="header-day">S</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="day adjacent-month last-month calendar-day-2015-06-28">
                                    <div onclick="iniciar()" class="day-contents">28</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-29">
                                    <div onclick="iniciar()" class="day-contents">29</div>
                                </td>
                                <td class="day adjacent-month last-month calendar-day-2015-06-30">
                                    <div onclick="iniciar()" class="day-contents">30</div>
                                </td>
                                <td class="day calendar-day-2015-07-01">
                                    <div onclick="iniciar()" class="day-contents">1</div>
                                </td>
                                <td class="day calendar-day-2015-07-02">
                                    <div onclick="iniciar()" class="day-contents">2</div>
                                </td>
                                <td class="day calendar-day-2015-07-03">
                                    <div onclick="iniciar()" class="day-contents">3</div>
                                </td>
                                <td class="day calendar-day-2015-07-04">
                                    <div onclick="iniciar()" class="day-contents">4</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-05">
                                    <div onclick="iniciar()" class="day-contents">5</div>
                                </td>
                                <td class="day calendar-day-2015-07-06">
                                    <div onclick="iniciar()" class="day-contents">6</div>
                                </td>
                                <td class="day calendar-day-2015-07-07">
                                    <div onclick="iniciar()" class="day-contents">7</div>
                                </td>
                                <td class="day calendar-day-2015-07-08">
                                    <div onclick="iniciar()" class="day-contents">8</div>
                                </td>
                                <td class="day calendar-day-2015-07-09">
                                    <div onclick="iniciar()" class="day-contents">9</div>
                                </td>
                                <td class="day calendar-day-2015-07-10">
                                    <div onclick="iniciar()" class="day-contents">10</div>
                                </td>
                                <td class="day calendar-day-2015-07-11">
                                    <div onclick="iniciar()" class="day-contents">11</div>
                                </td>
                            </tr>
                            <tr>
                                <td class="day calendar-day-2015-07-12">
                                    <div onclick="iniciar()" class="day-contents">12</div>
                                </td>
                                <td class="day calendar-day-2015-07-13">
                                    <div onclick="iniciar()" class="day-contents">13</div>
                                </td>
                                <td class="day calendar-day-2015-07-14">
                                    <div onclick="iniciar()" class="day-contents">14</div>
                                </td>
                                <td class="day calendar-day-2015-07-15">
                                    <div onclick="iniciar()" class="day-contents">15</div>
                                </td>
                                <td class="day calendar-day-2015-07-16">
                                    <div onclick="iniciar()" class="day-contents">16</div>
                                </td>
                                    <td class="day calendar-day-2015-07-17">
                                        <div onclick="iniciar()" class="day-contents">17</div>
                                </td>
                                    <td class="day calendar-day-2015-07-18">
                                        <div onclick="iniciar()" class="day-contents">18</div>
                                </td>
                                </tr>
                                    <tr>
                                        <td class="day calendar-day-2015-07-19"><div onclick="iniciar()" class="day-contents">19</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-20"><div onclick="iniciar()" class="day-contents">20</div>
                                    </td>
                                    <td class="day calendar-day-2015-07-21">
                                        <div onclick="iniciar()" class="day-contents">21</div>
                                </td>
                                    <td class="day calendar-day-2015-07-22">
                                        <div onclick="iniciar()" class="day-contents">22</div>
                                </td>
                                    <td class="day calendar-day-2015-07-23">
                                        <div onclick="iniciar()" class="day-contents">23</div>
                                </td>
                                    <td class="day calendar-day-2015-07-24">
                                        <div onclick="iniciar()" class="day-contents">24</div>
                                </td>
                                    <td class="day calendar-day-2015-07-25">
                                        <div onclick="iniciar()" class="day-contents">25</div>
                                </td>
                                </tr><tr><td class="day calendar-day-2015-07-26">
                                        <div onclick="iniciar()" class="day-contents">26</div>
                                </td><td class="day calendar-day-2015-07-27">
                                        <div onclick="iniciar()" class="day-contents">27</div>
                                </td><td class="day calendar-day-2015-07-28">
                                        <div onclick="iniciar()" class="day-contents">28</div>
                                </td><td class="day calendar-day-2015-07-29">
                                        <div onclick="iniciar()" class="day-contents">29</div>
                                </td><td class="day calendar-day-2015-07-30">
                                        <div onclick="iniciar()" class="day-contents">30</div></td><td class="day calendar-day-2015-07-31">
                                        <div onclick="iniciar()" class="day-contents">31</div>
                                </td><td class="day adjacent-month next-month calendar-day-2015-08-01">
                                        <div onclick="iniciar()" class="day-contents">1</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

Gracias.

3
  • Agrega el codigo del calendario Commented el 20 ago. 2018 a las 2:58
  • Es muy, muy extenso, pero ya lo agrego! Commented el 20 ago. 2018 a las 2:59
  • Creo que podrias conseguir el resultado si a iniciar() le agregas un parametro por ejemplo que te envie el valor html del div donde ocurrio el click, asi: iniciar(this.innerHTML) Commented el 20 ago. 2018 a las 3:13

1 respuesta 1

0

No se como estas realizando el calendario porque no lo dices, si es un fullCalendar este tiene funciones especificas para ello, pero si tienes más control sobre el calendario, podrías agregar el atributo a la td o al mismo div para manejar las fechas, algo así:

$(function(){
    $(".day-contents").click(function(){
        var fecha = $(this).parent('td').attr('data-date');
        alert(fecha);
    })
})
.day-contents{
  width:50px;
  height:50px;
  cursor:pointer;
  background-color:#1399c1;
  color:#ffffff;
  padding: 20px;
}
.day-contents:hover{
  background-color:#012530;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="day calendar-day-2015-07-18" data-date="2015-07-18">
            <div class="day-contents">18</div>
        </td>
    </tr>
</table>

Allí puedes apreciar que al darle clic al div, obtenemos la fecha del atributo data-date de la td, como mencione se puede hacer lo mismo más directamente manejando este atributo en el mismo div.

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.