0

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>

3
  • 1
    Estoy intentando hacer que tu código sea ejecutable, pero no hay modo. El código que compartes está incompleto y no funciona por sí solo, te faltan añadir bibliotecas (y especificar mejor cuáles estás usando, porque etiquetas jquery-datepicker pero luego en el código tienes bootstrap-datetimepicker). Por favor, lee cómo crear un ejemplo mínimo verificable y editar la pregunta con uno.
    – Alvaro Montoro
    Commented el 25 jun. 2017 a las 22:54
  • claro amigo ya edite la pregunta y puse las librerias
    – goku venz
    Commented el 25 jun. 2017 a las 23:32
  • 1
    He puesto tu código como ejecutable, sigue dando fallo porque falta Moment.js. Le he añadido Moment.js, ahora da fallo porque 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.
    – Alvaro Montoro
    Commented el 25 jun. 2017 a las 23:37

2 respuestas 2

0

No lo he probado para optimizar el tiempo de carga, pero quizás Arrive.js te pueda ayudar, ya que inicializarias el datepicker al momento en que el componente se agrega al DOM.

$(document).arrive('.datepick', function () {
  $(this).datetimepicker({
    language: "es",
    format: "yyyy-mm-dd hh:ii",
    autoclose: true
  });
});
0

Bootstrap datetimepicker != Boostrap datepicker

El problema es que importaste la librería bootstrap-datetimepicker en el HTML pero usaste la documentación de bootstrap-datepicker, por lo que le estas pasando claves y valores que no existen o en el formato inadecuado a la hora de configurar los selectores de fecha (o datepicker).

Por ejemplo: no existe la opción autoclose en datetimepicker y el formato de fecha/hora se describe de una manera diferente en ambas librerias.

Demo


Enlaces de interés:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Datepicker</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h4>Primer seguimiento:</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Desde</label>
                    <input name="f1_fecha_1a" type="text" class="form-control datepick" required>
                </div>
            </div>
            <div class="col-sm-3">
                <label>Hasta</label>
                <input name="f1_fecha_2a" type="text" class="form-control datepick" required>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <h4>Segundo seguimiento:</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Desde</label>
                    <input name="f1_fecha_1b" type="text" class="form-control datepick" required>
                </div>
            </div>
            <div class="col-sm-3">
                <label>Hasta</label>
                <input name="f1_fecha_2b" type="text" class="form-control datepick" required>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <h4>Tercer seguimiento:</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Desde</label>
                    <input name="f1_fecha_1c" type="text" class="form-control datepick" required>
                </div>
            </div>
            <div class="col-sm-3">
                <label>Hasta</label>
                <input name="f1_fecha_2c" type="text" class="form-control datepick" required>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <h4>Revisión:</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label>Desde</label>
                    <input name="f1_fecha_1d" type="text" class="form-control datepick" required>
                </div>
            </div>
            <div class="col-sm-3">
                <label>Hasta</label>
                <input name="f1_fecha_2d" type="text" class="form-control datepick" required>
            </div>
        </div>
    </div>

    <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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script>
        //! moment.js locale configuration
        //! locale : Spanish [es]
        //! author : Julio Napurí : https://github.com/julionc

        ;(function (global, factory) {
        typeof exports === 'object' && typeof module !== 'undefined'
           && typeof require === 'function' ? factory(require('../moment')) :
        typeof define === 'function' && define.amd ? define(['../moment'], factory) :
        factory(global.moment)
        }(this, (function (moment) { 'use strict';


        var monthsShortDot = 'ene._feb._mar._abr._may._jun._jul._ago._sep._oct._nov._dic.'.split('_');
        var monthsShort = 'ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic'.split('_');

        var es = moment.defineLocale('es', {
        months : 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
        monthsShort : function (m, format) {
            if (!m) {
                return monthsShortDot;
            } else if (/-MMM-/.test(format)) {
                return monthsShort[m.month()];
            } else {
                return monthsShortDot[m.month()];
            }
        },
        monthsParseExact : true,
        weekdays : 'domingo_lunes_martes_miércoles_jueves_viernes_sábado'.split('_'),
        weekdaysShort : 'dom._lun._mar._mié._jue._vie._sáb.'.split('_'),
        weekdaysMin : 'do_lu_ma_mi_ju_vi_sá'.split('_'),
        weekdaysParseExact : true,
        longDateFormat : {
            LT : 'H:mm',
            LTS : 'H:mm:ss',
            L : 'DD/MM/YYYY',
            LL : 'D [de] MMMM [de] YYYY',
            LLL : 'D [de] MMMM [de] YYYY H:mm',
            LLLL : 'dddd, D [de] MMMM [de] YYYY H:mm'
        },
        calendar : {
            sameDay : function () {
                return '[hoy a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextDay : function () {
                return '[mañana a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            nextWeek : function () {
                return 'dddd [a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastDay : function () {
                return '[ayer a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            lastWeek : function () {
                return '[el] dddd [pasado a la' + ((this.hours() !== 1) ? 's' : '') + '] LT';
            },
            sameElse : 'L'
        },
        relativeTime : {
            future : 'en %s',
            past : 'hace %s',
            s : 'unos segundos',
            m : 'un minuto',
            mm : '%d minutos',
            h : 'una hora',
            hh : '%d horas',
            d : 'un día',
            dd : '%d días',
            M : 'un mes',
            MM : '%d meses',
            y : 'un año',
            yy : '%d años'
        },
        dayOfMonthOrdinalParse : /\d{1,2}º/,
        ordinal : '%dº',
        week : {
            dow : 1, // Monday is the first day of the week.
            doy : 4  // The week that contains Jan 4th is the first week of the year.
        }
        });

        return es;

        })));
    </script>

    <script>
    $(function () {
        $('.datepick').datetimepicker({
            locale: 'es'
        });
    });
    </script>
</body>
</html>

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.