How can I center this datepicker in my form?

Question

https://i.stack.imgur.com/2yxhI.jpg
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

If you have a static width on the parent container of the datepicker, you can set a margin: 0 auto; on the parent to center it. Let me know if you don't have a set width on the parent. — Gezzasa, Jun 14 '16 at 12:18
ya please provide in fiddle. because when we put this on fiddle then only two textboxes shows — Deep Shah, Jun 14 '16 at 12:19
fiddle doesnt seem too like the datepicker. heres a link too the site. http://bbennett36.github.io/firstclass/bookatrip.html — Brennan Bennett, Jun 14 '16 at 12:24
Repeat question. Your datepicker is positioned absolute. Have a look at this answer...http://stackoverflow.com/a/1777282/1379450 — Gezzasa, Jun 14 '16 at 12:28
Hmm, im not sure how to call that on the actual datepicker prompt. That answer only affects the input boxes. — Brennan Bennett, Jun 14 '16 at 12:35
yeah that was just an answer i saw to a similar question, figured I would give it a try. They said the JS will override the CSS sometimes. — Brennan Bennett, Jun 14 '16 at 12:41

Anil Tiwari · Accepted Answer · 2016-06-14T12:48:09.397

1

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

edited Jun 14 '16 at 12:48

answered Jun 14 '16 at 12:40

Anil Tiwari

65
6

I got it too center with .ui-datepicker{margin-left: -10em;}, ill have to try it on different screens. – Brennan Bennett Jun 14 '16 at 12:46
It won't work, datepicker always set style.left on popup – Marcin O Jun 14 '16 at 12:46
Your new edit seems to be working. Let me test a couple more things. Yes this works. Thanks! – Brennan Bennett Jun 14 '16 at 12:51

score 0 · Answer 2 · answered Jun 14 '16 at 13:06

you have fixed style left: 577.172px in your html:

<div id="ui-datepicker-div" class="ui-datepicker 
ui-widget ui-widget-content ui-helper-clearfix ui-corner-all 
ui-datepicker-multi ui-datepicker-multi-3" style="position: absolute;
top: 459px; left: 577.172px; display: block; z-index: 4; width: 51em;">

remove the left attribute from <html>
add

#ui-datepicker-div{left: 50%; margin-left: -25.5em;}
- either in css or html (as initially used)
- use id's for css precedence
- no need for !important

How can I center this datepicker in my form?

2 Answers2