New question

Question:

Date: 25-05-2017 15:48:40 (In Spanish)

Problemas con rango de fechas en Datepicker Bootstrap[Resolved]

Hola a todos

En esta oportunidad queria solicitar una ayuda con el Datepicker con Bootstrap.
No logro hacer funcionar la selección de fechas en dos inputs
Aquí hay un ejemplo de su uso con el cual me he basado.

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

	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		var fecha = new Date();
		var fechaMes =fecha.getMonth()+1;
		$('#txtDob').val(fecha.getDate()+'/'+fechaMes+'/'+fecha.getFullYear());

	$('#txtDob').datepicker({
		format: "dd/mm/yyyy",
		startDate: new Date(2013, 01, 01),
		endDate: new Date(),
		setDate: new Date(),
		language: "es",
		todayHighlight: true,
		toggleActive: true,
		clearBtn: true,
		autoclose: true
	});

		$('#sandbox-container .input-daterange').datepicker({
			format: "dd/mm/yyyy",
			clearBtn: true,
			language: "es",
			autoclose: true,
			todayHighlight: true,
			toggleActive: true
		});

	});
</script>
</head>
<body>


<div class="container">
	<form action="#" method="post">

		<h3>DatePicker</h3>
		<label for="txtDob"></label>
		<input type="text" id="txtDob"/>

	<div class="row">&nbsp;</div><!-- row una fila en blanco para dar un espaciado arriba -->

		<h3>Rango de fechas</h3>
	<div class="input-daterange input-group" id="datepicker">
		<input type="text" class="input-sm form-control" name="start" />
		<span class="input-group-addon">hasta</span>
		<input type="text" class="input-sm form-control" name="end" />
	</div>

	</form>
</div>

</body>
</html>


El primer input que es para seleccionar une fecha funciona correctamente.
No funciona en el de rango de fechas.
Por otro lado no logro achicar el largo de los dos input, toman el ancho de la página. Quiero que el ancho sea mas acorde para introducir una fecha.

Desde ya agradezco la ayuda.

Que tengan un buen dia.

Saludos

Tags: Bootstrap - Datepicker - JQuery - Question Votes: 0 - Answers: 4 - Views: 21 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  •  
      3  
     
    Date: 25-05-2017 17:32:54 Hola, lo que sucede es que estas colocando mal el selector, aquel #sandbox-container falla porque no tienes ningun elemento en tu estructura HTML con aquel atributo ID si colocas simplemente:

    $('.input-daterange').datepicker({
        format: "dd/mm/yyyy",
        clearBtn: true,
        language: "es",
        autoclose: true,
        todayHighlight: true,
        toggleActive: true
    });


    Deberia funcionarte

    Podrias hacerlo de otra manera tambien añadiendo otra propiedad la cual es inputs al objeto que envias al constructor datepicker seria algo asi:

    $('#datepicker').datepicker({
        inputs:$('.range_date'),
        format: "dd/mm/yyyy",
        clearBtn: true,
        language: "es",
        autoclose: true,
        todayHighlight: true,
        toggleActive: true
    });


    Eso serviria por ejemplo para la siguiente estructura HTML:
    <h3>Rango de fechas</h3>
    <div class="input-group" id="datepicker">
        <input type="text" class="input-sm form-control range_date">
        <span class="input-group-addon">hasta</span>
        <input type="text" class="input-sm form-control range_date">
    </div>


    Mas info Doc Bootstrap Datepicker

    Aunque la inicial me parece mucho mas sencilla.

    Con respecto al ancho, eso lo defines tu con las clases col-*-* de Bootstrap implementando el sistema de rejillas que este te ofrece o definiendo tu propio estilo CSS, pero si estas incluyendo Bootstrap deberias usarlo, tantas lineas y sin uso no viene bien.

    Grid Bootstrap

    Nos avisas si te sirve la info.
      Votes: 3 - Link answer
     
  • Date: 25-05-2017 18:48:46 Kip 13 muchas gracias por tu respuesta la cual ha resuelto el problema. Además que es de mucha ayuda tu explicación con los ejemplos.

    He probado los dos códigos que has expuesto, he optado utilizar el primero como lo has sugerido.

    En cuanto al uso del CSS de Bootstrap, no entiendo cuando dices "tantas lineas y sin uso no viene bien."

    Si te refieres a este codigo
    <div class="row">&nbsp;</div><!-- row una fila en blanco para dar un espaciado arriba -->

    Lo he utilizado para dar un espaciado entre la sección DatePicker y Rango de fechas, fue la única manera que encontré para darle un espaciado, como si fuese un <br>.

    Aprovecho la oportunidad para preguntar si conoces algún plugin parecido al DatePicker pero que siva para seleccionar Horas y Minutos solamente (sin la fecha) formato HH:MM

    Muchas gracias por toda la ayuda prestada.

    Que tengas un buen dia

    Saludos
      Votes: 1 - Link answer
     
  • Date: 25-05-2017 19:00:53 Hola!. Ademas, te recomiendo que para el tema de las fechas en JS te conviene 1000 veces usar momentjs . Te va a ayudar con la manipulación para que coordine con php.   Votes: 1 - Link answer
     
  • Date: 27-05-2017 17:07:55 Hola :)

    He estado investigando un poco sobre los DatePicker para bootstrap 3.
    He encontrado uno llamado DateTimePicker el cual resuelve por completo mis necesidades, tiene un calendario en el cual se selecciona una fecha, un rango de fechas y también se puede seleccionar la Hora y Minutos. Era lo que estaba buscando, una solución integral.

    Selección sobre la Hora y Minutos únicamente.

    Selecion de Fecha con Hora:


    Bootstrap 3 - Datepicker v4 Docs Bootstrap 3 - Datepicker v4 sus opciones

    He estado mucho tiempo en entenderlo y hacerlo funcionar en base de prueba y error ya que no he encontrado buena info para alguien que tiene pocos conocimientos del tema.
    Por ello expondré los códigos que he han resultado favorables por si ha alguien le interesa.

    Ingredientes:
    - Bootstrap 3.3.7
    - Jquery 3.2.1
    - Datepicker 4.17.47
    - moment.js 2.18.1
    - Para la traducción al español en el uso de moment [locale] (opcional) descargan el lenguaje que necesitan, en mi caso es.js

    Par probar lo integre en un FORM para enviar los datos seleccionados.
    Formulario; datetimepicker_form.html
    Cambiar las rutas de los archivos integrados en el HTML por las de ustedes.
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Bootstrap 3 - bootstrap-datetimepicker Ver. 4</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen" href="bootstrap-datetimepicker4/css/bootstrap-datetimepicker.min.css">
        <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="moment/moment.min.js"></script>
        <script type="text/javascript" src="moment/locale/es.js"></script>
        <script type="text/javascript" src="bootstrap-datetimepicker4/js/bootstrap-datetimepicker.min.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                $(function () {
                    $('#calendario').datetimepicker({
                        locale: 'es',
                        showClose: true,
                        toolbarPlacement: 'top',
                    });
                    $('#calendarioSinReloj').datetimepicker({
                        locale: 'es',
                        format: 'L',
                        showClose: true,
                        toolbarPlacement: 'top',
                    });
                    $('#reloj').datetimepicker({
                        format: 'LT',
                        showClose: true,
                    });
    
                    $('#rangoFechaInicial').datetimepicker();
                    $('#rangoFechaFinal').datetimepicker({
                        useCurrent: false //Important! See issue #1075
                    });
                    $("#rangoFechaInicial").on("dp.change", function (e) {
                        $('#rangoFechaFinal').data("DateTimePicker").minDate(e.date);
                    });
                    $("#rangoFechaFinal").on("dp.change", function (e) {
                        $('#rangoFechaInicial').data("DateTimePicker").maxDate(e.date);
                    });
    
                });
            });
        </script>
    </head>
    <body>
    <h3 class="text-center">Bootstrap Ver. 3 <span class="label label-success">DateTimePicker Ver. 4.</span></h3>
    <form method="POST" action="post.php">
        <div class="container">
            <h4>DateTimePicker: Calendario con Reloj, Hora y minutos [HH:mm]</h4>
            <div class="row">
                <div class='col-sm-3'>
                    <div class="form-group">
                        <div class='input-group date' id='calendario'>
                            <input type='text' class="form-control" name="calendario" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
        <div class="container">
            <h4>DateTimePicker: Calendario sin Reloj.</h4>
            <div class="row">
                <div class='col-sm-3'>
                    <div class="form-group">
                        <div class='input-group date' id='calendarioSinReloj'>
                            <input type='text' class="form-control" name="calendarioSinReloj"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="container">
            <h4>DateTimePicker: Horas y minutos. HH:mm</h4>
            <div class="row">
                <div class='col-sm-2'>
                    <div class="form-group">
                        <div class='input-group date' id='reloj'>
                            <input type='text' class="form-control" name="reloj"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-time"></span>
                        </span>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    
        <div class="container">
            <h4>DateTimePicker: Rango de fecha - Calendario con Reloj, Hora y minutos [HH:mm]</h4>
            <div class='col-md-5'>
                <div class="form-group">
                    <div class='input-group date' id='rangoFechaInicial'>
                        <input type='text' class="form-control" name="rangoFechaInicial"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
            </div>
            <div class='col-md-5'>
                <div class="form-group">
                    <div class='input-group date' id='rangoFechaFinal'>
                        <input type='text' class="form-control" name="rangoFechaFinal"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="text-center">
            <button type="submit" name="Operacion" value="Grabar" class="btn btn-primary">Enviar</button>
        </div>
    </form>
    </div>
    
    </body>
    <html>
    


    Resultante:

    Para recibir los datos: post.php
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Datos obtenidos</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <h2 class="text-info">Datos recibidos del formulario.</h2>
            <hr/>
            <pre><?php print_r($_POST); ?></pre>
        </div>
    </div>
    </body>
    </html>
    


    Resultante al enviar el formulario:


    Para que no les pase como a mi en perder el tiempo buscando cada componente y luego liar con integrar todo para que funcione les dejo el link de descarga de mi codigo totalmente funcional.
    Descarga de bootstrapProyecto.zip
    Descargar, descomprimir y probar.

    Espero que les sea de utilidad.

    Seguiré probando otras cosas con este plugin y tratare de adaptarlo a lo que ya tenía hecho.

    Que tengan un buen dia.

    Saludos
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In