jQuery Datepicker宽度

Question

我不明白为什么这么难做。关于jQuery的一切都很简单。如何设置jQuery的宽度“display：inline;”日期选择器？

我已经编辑了jquery ui css，但是一旦我更改月份，它就会重置宽度。

我希望这只是一种我不知道的愚蠢行为。

Answer 1

如果您使用的是默认表单中的jQuery datepicker，那么只需将其添加到您的css中即可：

.ui-datepicker {
width: 17em; /*what ever width you want*/
}

Answer 2

缩小日历的字体大小会减少日期选择器的宽度。

您可以通过添加此css来缩小字体大小：

div.ui-datepicker
{
    font-size:10px;
}

Answer 3

我使用包装器解决了这个问题，并设置CSS类以强制内联日期选择器的宽度为其父级的宽度的100％，因此，例如，当您将日期选择器放置在 .col 上时，当行宽更改时，小部件会调整为其父级的宽度，当然可以达到最大限制，但是可以接受。这对我在引导程序中使用很有用。col和width会响应。

<div style="width:30vw;">
 <div id="mydatepicker"></div>
</div>

<script type="javascript">
 $('#mydatepicker').datepicker();
</script>

<style>
 .ui-datepicker.ui-datepicker-inline {
   width: 100% !important;
 }
</style>

当然，您可以将样式放在网站CSS文件中，但始终放在jQuery-ui样式之后。

通过代码段更改#mydpcontainer的宽度进行测试

$('#mydatepicker').datepicker();

.ui-datepicker.ui-datepicker-inline {
  width: 100% !important;
}

.mydpcontainer {
  width: 35vw;
  margin-left: auto;
  margin-right: auto;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="mydpcontainer">
  <div id="mydatepicker"></div>
</div>

Answer 4

.container {
  width: 270px;
}
<div class="container">
  <div class='col-md-5'>
    <div class="form-group">
      <div class='input-group date' id='datetimepicker6'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>