Bootstrap Datepicker goes bottom

0
votes

I am not an expert in Bootstrap 3. It was my first time to use the widget "datepicker". I have two date pickers that need to be displayed inline to each other. When I try a normal input it works but if it is a date picker it goes a little far at the bottom. I tried the position relative however it did not resolve the issue. See screen shot attached.Date picker goes at the bottom Hope some one can give me some light. Below is my code.` 

<div class="horiz-search-bar-wrapper">
              <form class="form-inline">
                <div class="form-group">
                  <label><strong>Search</strong></label>
                </div>

                <div class="input-daterange">
                  <div class="form-group rel-position-date">
                    <label>Check-In:</label>
                    <div class="input-group input-append date" id="from">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                  <div class="form-group rel-position-date">
                    <label>Check-Out</label>
                    <div class="input-group input-append date" id="to">
                      <input type="text" class="form-control">
                      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                    </div>
                  </div>
                </div>


                <div class="form-group mar-left">
                  <button type="button" class="btn btn-primary">
                           Submit
                  </button>
                </div>
              </form>
         </div>

`

2
bootstrap-modalbootstrap-datepicker

2 Answers

0
votes

Just an update to this, we were able to fixed the issue by replacing the <label></label> tag to <span></span>. The bootstrap datepicker adds top pixels when it sees more than 1 label.

Hope this could help the others.

0
votes

I was also seeing issues with the Datepicker appearing too low. Whether the targeted element was toward the top or bottom of the viewport and the Datepicker was respectively orienting itself above or below the element, I was seeing a Datepicker appear "too-low."

Stumbled on to a fix with some JavaScript hackery bound to the DP's "show" event/hook.

Note the use of the native Boostrap CSS utility classes datepicker-orient-top and datepicker-orient-bottom.

$('#DateOfBirthForEditing').datepicker().on("show", function (e) {

    var refDatePicker = $('div.datepicker.datepicker-dropdown');
    var refDatePickerField = $('#DateOfBirthForEditing');
    var fieldPositionTop = refDatePickerField.offset().top;

    var dpModalTopOffset = 0;

    if (refDatePicker.hasClass('datepicker-orient-top')) {
        dpModalTopOffset = fieldPositionTop - 255;
    } else if (refDatePicker.hasClass('datepicker-orient-bottom')) {
        dpModalTopOffset = fieldPositionTop + 30;
    }

    refDatePicker.css({ "top": dpModalTopOffset }); 
});