Necesito utilizar 16 datepickers en una sola página, pero al momento de abrir la página me tarda en cargar, aún incluso probando en local con los JS y CSS (datepicker-bootstrap.js, datepiker-bootstrap.css, etc) en la misma carpeta, no referenciados de Internet (http). ¿Alguna forma para agilizar estos datepickers?
Éste es mi código:
$('.datepick').each(function() {
$(this).datetimepicker({
language: "es",
format: "yyyy-mm-dd hh:ii",
autoclose: true
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<table style='border-collapse: separate; border-spacing: 10px'>
<tr>
<td>Primer seguimiento:</td>
</tr>
<tr>
<td style='width:200px'>
<input name="f1_fecha_1a" type="text" class="datepick" required>
</td>
<td>a</td>
<td style='width:200px'>
<input name="f1_fecha_2a" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Segundo seguimiento:</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1b" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2b" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Tercer seguimiento:</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1c" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2c" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Revisión:</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1d" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2d" type="text" class="datepick" required>
</td>
</tr>
</table>
<table style='border-collapse: separate; border-spacing: 10px'>
<tr>
<td>Primer seguimiento (2):</td>
</tr>
<tr>
<td style='width:200px'>
<input name="f1_fecha_1a" type="text" class="datepick" required>
</td>
<td>a</td>
<td style='width:200px'>
<input name="f1_fecha_2a" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Segundo seguimiento (2):</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1b" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2b" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Tercer seguimiento: (2)</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1c" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2c" type="text" class="datepick" required>
</td>
</tr>
<tr>
<td>Revisión: (2)</td>
</tr>
<tr>
<td>
<input name="f1_fecha_1d" type="text" class="datepick" required>
</td>
<td>a</td>
<td>
<input name="f1_fecha_2d" type="text" class="datepick" required>
</td>
</tr>
</table>
bootstrap-datetimepicker
). Por favor, lee cómo crear un ejemplo mínimo verificable y editar la pregunta con uno.language
no es una opción válida para Bootstrap Datetimepicker. Con el código que compartes no es que vaya a ir lento, es que no va a ir directamente. Por favor, crea un ejemplo mínimo verificable para que veamos cómo falla el programa, porque con lo que compartes, no se puede reproducir el problema.