Any way to expedite these datepickers?

Navigation
0

I need to use 16 datepickers on a single page, but when I open the page it takes me a while to load, even testing locally with the JS and CSS (datepicker-bootstrap.js, datepiker- bootstrap.css, etc) in the same folder, not referenced from the Internet (http). Any way to streamline these datepickers?

This is my code: 

$('.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>
    
asked by goku venz 26.06.2017 в 00:42
source

2 answers

0

I have not tried it to optimize the loading time, but maybe Arrive.js can help you, since you would initialize the datepicker at the time the component is added to the DOM. 

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

Bootstrap datetimepicker != Boostrap datepicker

The problem is that you imported the library bootstrap-datetimepicker in the HTML but you used the documentation of bootstrap-datepicker , so you are passing them keys and values that do not exist or in the wrong format when configuring the selectors of date (or datepicker).

For example: there is no autoclose option in datetimepicker and the date / time format is described differently in both libraries.

Demo

Links of interest: 

<!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>
    
answered by 26.06.2017 в 05:27
How to use a default value to model a segment in ionic 2? Problems with the Google map