Question

http://imgur.com/w1AaBbK
这就是目前的样子。我希望它尽可能在屏幕的中心。这是datepicker部分的代码

    <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>

和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);
    }
});
});

我正在尝试这个CSS，但它不起作用

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

无法操作日期选择器。继承人网站也是一个链接。 http://bbennett36.github.io/firstclass/bookatrip.html

Answer 1

尝试使用

覆盖内联css

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

25.5em是日历容器宽度的一半

Answer 2

你的html中有固定的样式left: 577.172px：

<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;">

从＆lt; html＆gt;
添加

#ui-datepicker-div{left: 50%; margin-left: -25.5em;}
- 使用css或html（如最初使用的）
- 使用id＆＃39; s作为css优先权 - 不需要！important

如何将此日期选择器置于表单中心？

2 个答案: