Brennan Bennett Brennan Bennett - 5 months ago 8
Javascript Question

How can I center this datepicker in my form?

http://imgur.com/w1AaBbK

this is what it looks like at the moment. Id like it to be in the center of the screen if possible. here is the code for the datepicker part

<div class="input-group" style="margin-left: 20px;">
<div id="datepicker-container">
<div id="datepicker-center">
<input type="text" id="from" class="form-control" style="width: 180px"/>
<input type="text" id="to" class="form-control" style="width: 180px"/>
</div>
</div>
</div>


and the JS

$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});


I was trying this CSS, but it doesnt work

#datepicker-container{
text-align:center !important;
}
#datepicker-center{
display:inline-block !important;
margin:0 auto !important;
}


Cant get fiddle to run the datepicker. heres a link too the site. http://bbennett36.github.io/firstclass/bookatrip.html

Answer

try overriding inline css with

.ui-datepicker{ left: 50% !important; margin-left: -25.5em !important;}

25.5em is the half of width of calendar container