Display datetimepicker up

Question

Display datetimepicker up

Navigation

#1 by (1 votes)

1

How do I do to display a datetimepicker up immediately above the input that displays it? How should I initialize it?

Use bootstrap 3.3.7. For now I only have it initialized in this way:

$("[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")
})

But I do not know what to put to achieve the above said.

jquery bootstrap bootstrap-3 datepicker

asked by Necroyeti 30.11.2017 в 23:25

source

1 answer

java.lang.ArrayIndexOutOfBoundsException: 0 when using split () in java [duplicate] Error "Single positional indexer is out of bounds" when reading csv

score 1 · Accepted Answer

The option to position it is widgetPositioning .

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

Code (best viewed in full screen):

$("#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>