Geek Answers Handbook

Controlling a date picker calendar field from a date field using jQuery

I am working with the Bootstrap Datepicker module, and I noticed that the datepicker calendar 'arrow for the drop-down list overlaps the date field by at least 3 pixels. See image below. I was thinking of providing the main container for the calendar (drop-down list containing calendar and arrow, css pseudoclass ::after) a margin-top:5px;But not cigars. Mostly because javascript overwrites it. I looked for any backup options in the documentation and nothing like that. Therefore, I assume that I will need custom jQuery to manage the calendar in the DOM and the fix top:##pxby - + 5px depending on whether the top or bottom opens.

EDIT I also tried overwriting top:##px;and giving it an extra 5px and !importantso that it actually overwrites it, but the problem is that the top positioning should be handled in the DOM according to the position of the datepicker field, otherwise all the date pickers will be displayed in the same place.

This image shows the output. enter image description here

Bootstrap DatePicker documentation can be found here.

And the code that I have is as follows:

<div class="form-group">
    <label class="control-label">Date Of Birth</label>
    <div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
         <input type="text" class="form-control">
         <span class="input-group-addon">
             <i class="fa ion-calendar"></i>
         </span>
    </div>
</div>

$('.date').datepicker({
    todayHighlight: true,
    autoclose: true
});

Very simple.

Here's an image of an inspector, and you can see the top position value added by JS.

enter image description here

Any idea on how to bring this sucka?

Here is CODEPEN with my problem

+4
1

initializing datepicker <div class="input-group date" id="datepicker" input.

$('.date').datepicker({
  todayHighlight: true,
  autoclose: true
});

<div class="form-group">
  <label class="control-label">Date Of Birth</label>
  <div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
    <!-- _______________^^ Remove class `date` from here -->
    <input type="text" class="form-control date">
    <!-- ____________________^^ Add class `date`here -->
    <span class="input-group-addon">
             <i class="fa ion-calendar"></i>
         </span>
  </div>
</div>

0

More articles:


All Articles