1

tengo un modal donde estoy colocando dos datetimepicker uno para ingresar una fecha inicial y el otro una fecha final, con el objetivo de buscar en la bd ciertos datos que estén entre estas dos fechas, he estado buscando pero no he logrado encontrar las instrucciones para validar que si ya ingrese una fecha inicial, evite que en el segundo datetimepicker pueda seleccionar una fecha anterior, es decir que si ingreso 01/02/2022 (2022/02/01) no me permita seleccionar 31/01/2022(2022/01/31) ni ninguna otra fecha anterior a la señalada en el primero.

Estoy utilizando boostrap-datetimepicker para este evento.

Mi código de los datetimepicker:

                                                               $("#reporteCategoriaA1").datetimepicker({
 language: 'es',
 startDate:new Date(),
 format: "YYYY-MM-DD",  // Solo se ocupa la fecha
 yearRange:"-99:+0", // no hace nada
 maxDate: "+0m +0d", // no hace nada
 //format: "YYYY-MM-DD HH:mm:ss", // no se requiere la hora
 timepicker:false,
 autoclose: true,
 //pickTime: false
 showButtonPanel: true,
 });
 
$("#reporteCategoriaA2").datetimepicker({
 language: 'es',
 startDate:new Date(),
 format: "YYYY-MM-DD",  // Solo se ocupa la fecha
 yearRange:"-99:+0", // no hace nada
 maxDate: "+0m +0d", // no hace nada
 //format: "YYYY-MM-DD HH:mm:ss", // no se requiere la hora
 timepicker:false,
 autoclose: true,
 //pickTime: false
 showButtonPanel: true,
 });

                                                                                                                       

Agradezco cualquier aporte.

Saludos

0

2 respuestas 2

2

La solución es simple. Suponiendo que estás usando jquery-datetimepicker (lo cual nunca especificas), usa el evento onChangeDateTime para detectar cuando se establece una fecha en el primer datetimepicker. Dentro de la función que maneja el evento, establece la fecha mínima (minDate) del segundo datetimepicker a la fecha que seleccionó el usuario en el primero.

Te adjunto un ejemplo que puede probar desde acá:

function handleChange(e){
   $("#reporteCategoriaA2").datetimepicker({
       minDate: new Date(e)
    })
}


$("#reporteCategoriaA1").datetimepicker({
 language: 'es',
 startDate:new Date(),
 format: "Y-m-d",  // Solo se ocupa la fecha
 yearRange:"-99:+0", // no hace nada
 maxDate: "+0m +0d", // no hace nada
 //format: "YYYY-MM-DD HH:mm:ss", // no se requiere la hora
 timepicker:false,
 autoclose: true,
 //pickTime: false
 showButtonPanel: true,
 onChangeDateTime: handleChange
 });
 
$("#reporteCategoriaA2").datetimepicker({
 language: 'es',
 startDate:new Date(),
 format: "Y-m-d",  // Solo se ocupa la fecha
 yearRange:"-99:+0", // no hace nada
 maxDate: "+0m +0d", // no hace nada
 //format: "YYYY-MM-DD HH:mm:ss", // no se requiere la hora
 timepicker:false,
 autoclose: true,
 //pickTime: false
 showButtonPanel: true,
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>

<input type="text" id="reporteCategoriaA1">
<input type="text" id="reporteCategoriaA2">


Usando boostrap-datetimepicker

$("#reporteCategoriaA1").datetimepicker({
    format: 'YYYY-MM-DD'

});

$("#reporteCategoriaA2").datetimepicker({
    format: 'YYYY-MM-DD',
});

$("#reporteCategoriaA1").on("dp.change", function (e) {
    $('#reporteCategoriaA2').data("DateTimePicker").minDate(e.date);
});

$("#reporteCategoriaA2").on("dp.change", function (e) {
    $('#reporteCategoriaA1').data("DateTimePicker").maxDate(e.date);
});
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="form-group">
  <label for="startTime" class="col-sm-2 control-label">Fecha inicial: </label>
  <div class="col-sm-10 input-group date" id="startTimePicker">
    <input type="text" class="form-control" id="reporteCategoriaA1" placeholder="Introduzca la hora de inicio">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
    </span>
  </div>
</div>


<div class="form-group">
  <label for="startTime" class="col-sm-2 control-label">Fecha final: </label>
  <div class="col-sm-10 input-group date" id="startTimePicker">
    <input type="text" class="form-control" id="reporteCategoriaA2" placeholder="Introduzca la hora de inicio">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-calendar"></i>
    </span>
  </div>
</div>

12
  • Gracias por el aporte, aquí funciona a la perfección, déjame probar en mi desarrollo y cualquier detalle te comento. Buen día!!.
    – Cesarin
    el 6 abr. 2022 a las 17:35
  • Una última que me surgió mientras elaboraba la respuesta. ¿Estás usando jquety-datetimepicker o bootstrap-datetimepicker? el 6 abr. 2022 a las 17:37
  • bootstrap-datetimepicker , por lo que estoy viendo no me va a funcionar adecuadamente ya que en el ejemplo estas utilizando jquery.datetimepicker.full.js, quizás deba cambiar mis librerias....
    – Cesarin
    el 6 abr. 2022 a las 17:39
  • Buff, deberías especificar eso en tu pregunta. No estoy seguro que te sirva mi respuesta. Son muy similares pero no son iguales. Me haces saber. el 6 abr. 2022 a las 17:40
  • 1
    ya me funciona, hice un mezcla entre bootstrap y el primer ejemplo que me pusiste, esto derivado de un error en la vista que por mas que revise, cambie los js y los css nada mas no queda. Al final tengo los componentes boostrap aunque el calendario es jquery y funciona bien sin problema. Te agradezco la atencion. Buen fin!!!! y semana de vacaciones si eres de México
    – Cesarin
    el 8 abr. 2022 a las 17:43
0

Después de continuar revisando y actualizando el proyecto, al incorporar elementos nuevos sobre un desarrollo antiguo.

respecto al datetimepicker termine descargando las librerías para el calendario de este sitio datetimepicker 2.5.20.

Para que me muestre el idioma en español tuve que descargar librerías adicionales, descargue moment.js y una carpeta denominada locale que contiene un diccionario muy extenso de idiomas.

y añadir unas lineas adicionales de código por fuera de la función del datetimepicker para que tomara el idioma.

$(document).ready(function () {
            jQuery.datetimepicker.setLocale('es');
        });

ya que la petición interna language: 'es' & locale: 'es' ninguna de estas funcionaba.

Seguí utilizando las librerías de bootstrap (version v3.3.7) para los botones y vistas en general como el modal etc, y la libreria jquery 3.5.1 para uso general.

Por si a alguien le sirve esta experiencia.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.