1

¿Cómo le hago para desplegar un datetimepicker hacia arriba inmediatamente encima del input que lo despliega? ¿Cómo debería inicializarlo?

Uso bootstrap 3.3.7. Por ahora solo lo tengo inicializado de esta manera:

$("[id^='Date']").datetimepicker({
    locale: 'es',
    format: 'DD/MM/YYYY',
    maxDate: Date.now(),
    showClose: true,
    allowInputToggle: true,
    keepInvalid: true,
    ignoreReadonly: true,        
}).on("dp.show", function () {
    $(this).next().css("bottom", 57)
    $(".content.clearfix").css("overflow", "visible")
}).on("dp.hide", function () {
    $(".content.clearfix").css("overflow", "hidden")
})

Pero no sé qué ponerle para lograr lo anterior dicho.

2 respuestas 2

1

La opción para posicionarlo es widgetPositioning.

widgetPositioning: {
    horizontal: 'auto',   //  'auto', 'left', 'right'
    vertical: 'top'       //  'auto', 'top', 'bottom'
}


Código (se ve mejor en pantalla completa):

$("#datetimepicker").datetimepicker({
  locale: 'es',
  format: 'DD/MM/YYYY',
  maxDate: Date.now(),
  showClose: true,
  allowInputToggle: true,
  keepInvalid: true,
  ignoreReadonly: true,
  widgetPositioning: {
    horizontal: 'auto',
    vertical: 'top'
  }
}).on("dp.show", function() {
  $(this).next().css("bottom", 57)
  $(".content.clearfix").css("overflow", "visible")
}).on("dp.hide", function() {
  $(".content.clearfix").css("overflow", "hidden")
});
.container {
  /* para simular que está en el medio de la página */
  margin: 300px auto;
}
<!-- jQuery -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<!-- Moment.js -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/locale/es.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Bootstrap DateTimePicker -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>



<!-- HTML -->
Ver el input más abajo
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

0

a mi me funcciono esto:

$('.input-group.date').datepicker({
     orientation: 'bottom'
})

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.