Saltar al contenido

Bootstrap-Datetimepicker no funciona

Solución:

Parecía haber algunos problemas con los recursos externos en su jsFiddle.

He actualizado jsFiddle para que funcione. Cambié los recursos externos e hice algunos ajustes menores en el código.

HTML

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class="col-md-5">
            <div class="form-group">
                <div>Start</div>

                <div class="input-group date" id='startDate'>
                    <input type="text" class="form-control" name="startDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group">
                <div>End</div>

                <div class="input-group date" id='endDate'>
                    <input type="text" class="form-control" name="org_endDate" />
                    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT

jQuery(function () {
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
    jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });
});

ACTUALIZAR

  • En su jsFiddle, hace referencia a “bootstrap-datepicker.min.js” y no a “bootstrap-datetimepicker.min.js”.
  • parece que “bootstrap-datepicker.min.js” necesita “moment.js” como requisito previo. Tenga en cuenta que el orden de incluye materia.
  • Finalmente, “en-gb.js” debe aparecer en la lista después de “bootstrap-datetimepicker.min.js”.

JsFiddle actualizado con solución de trabajo.

El orden de inclusión de secuencias de comandos en jsFiddle no funciona, a continuación se muestra el orden modificado para una muestra viable. Como lo sugiere @malkassem, moment.js es necesario para que funcione el selector de fechas de arranque.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>        
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>                
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *