0

estoy trabajando con datapicker bootstrap en rango de fechas y particularmente este este contenedor no tiene input para seleccionar la fecha, mas bien todo se basa en un div

 <div id="reportrange" name="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>

lo cual las fechas no las puedo enviar ni por post ni por get no entiendo por que, intente crear un input oculto para pasarle los valores atraves de una funcion onchange pero tampoco resulta! ideas....?

$('#reportrange').on('change',function myFunction(){
var x = $('#reportrange').val();
$("#oculto").val(x);
});

donde #oculto es mi inputintroducir la descripción de la imagen aquí

4
  • estas trabajando con este plugin? bootstrap-datepicker.readthedocs.io/en/stable
    – JuankGlezz
    Commented el 7 jun. 2017 a las 19:28
  • ¿Es ese todo el código que te genera el plugin?
    – yorodm
    Commented el 7 jun. 2017 a las 19:47
  • @yorodm, si pondre una captura, ocupo esa clasa ya que me genera fechas por dia, semana, mes
    – matteo
    Commented el 7 jun. 2017 a las 20:51
  • @JuankGlezz si, pero con "range"
    – matteo
    Commented el 7 jun. 2017 a las 20:51

3 respuestas 3

3

Te dejo un ejemplo con un daterange tambien con bootsrap espero te sirva de algo.

$('input[name="daterange"]').daterangepicker(
{
    locale: {
      format: 'YYYY-MM-DD'
    },
    startDate: '2013-01-01',
endDate: '2013-12-31'
}, 
function(start, end, label) {
    alert("El Rango de fecha : " + start.format('YYYY-MM-DD') + '  Al  ' + end.format('YYYY-MM-DD'));
});
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<div>
    <input class="form-control text-center" name="daterange" value="" />
</div>
<br>

2
  • Gracias por responder, actualize mi pregunta con una imagen de tipo de objeto del datapicker que en particular tiene con un menu fechas de "ayer" "la semana pasada" "el mes pasado" y en el manual se manda a llamar sin ningun input
    – matteo
    Commented el 7 jun. 2017 a las 20:56
  • Pon todo el codigo de tus librerias con eso nos ayudarias, para resolverte el problema Commented el 8 jun. 2017 a las 17:09
2

No se que intentas con ese código, pero el div que tienes en primera debe de ser convertido a la clase de datepicker para que pueda ser usado y te regrese un valor. Si ya lo tienes así pues es demasiado fácil. En segunda, estás tratando de triggerear un evento que no corresponde al comportamiento de un div

https://www.w3schools.com/jsref/event_onchange.asp

Ahora que si lo que quieres es que cuando le des click al div se dispare un evento te puedo ayudar con este código:

<script>
  $(function() {
    $("#reportrange").datepicker({
      onSelect: function(date) {
        //PUEDES HACER UN AJAX O LO QUE QUIERAS, LA VARIABLE DATE CONTIENE LO QUE ELEGISTE DEL CALENDARIO
      }
    });
  }); 
</script>
1
  • Gracias por responder, ya actualize mi pregunta, el div ya contiene los atributos para que sea del tipo date-range-picker, el codigo completo del div salio de la pagina oficial de bootstrap!
    – matteo
    Commented el 7 jun. 2017 a las 21:02
2

La solucion a el problema fue bastante sencillo,

primeramente me di cuenta que el las el rango de fechas del contenedor div se genera en el span en tiempo de ejecucion por lo que opte por crear una funcion en javascript que obtuviera dicho texto.

<script>
  $(document).ready(function(){
    $("#btnrango").click(function(){
      var fechas_rango = $("#texto").text();
      alert(fechas_rango);
    });
  });
</script>

despues de eso ya puedo disponer de el rango de fechas dentro de una variable var fechas_rango para enviarla por get o cualquier cosa que se me ocurra.

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.