Multiple (Eonasdan) DateTimePickers in a horizontal row.

Posted on October 24th, 2015 at 11:00 AM


Eonasdan's datetimepicker (DTP) here took a bit of getting used to but its our control-of-choice now for Bootstrap sites. We did find a problem with multiple DTPs in a row across the page. Online suggestions said that say a second DTP should be placed in a child div of a parent div containing the initial DTP. However we found that when we clicked on the second DTP the first would open too. Simple solution was to put individual DTPs in a table cells

<tr style="border: 0px" > <td style="border: 0px; padding: 0px 0px 0px 0px" > <div class='input-group date' id='datetimepicker1' style="max-width: 180px; margin-top: 3px"> <input type='text' class="form-control" /> <span class="input-group-addon" > <span class="glyphicon glyphicon-calendar"></span> </span> </div> </td> <td style="border: 0px; padding: 0px 0px 0px 7px" > <div class='input-group date' id='datetimepicker2' style="max-width: 180px; margin-top: 3px"> <input type='text' class="form-control" /> <span id='dtpbtn2' class="input-group-addon"> <span id='dtpico2' class="glyphicon glyphicon-calendar"></span> </span> </div> </td> </tr>