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
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments