jQuery 日期选择器宽度答案

【问题标题】：jQuery Datepicker WidthjQuery 日期选择器宽度
【发布时间】：2011-11-21 02:51:15
【问题描述】：

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

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

我希望这只是我缺少的一些愚蠢的东西。

【问题讨论】：

【解决方案1】：

如果您以默认形式使用 jQuery 日期选择器，那么只需将其添加到您的 css 中，它应该可以工作：

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

【讨论】：

我撤消了对 jQuery UI CSS 的更改，它只是为了实验。
当字体太小时仍然不会自动改变字体大小...（grumble，grumble，grumble）
@Kishore- II 有同样的问题。这里我使用了你的代码，但只有边框在改变。日历没有改变
@Nithu 很抱歉，日历没有改变是什么意思
我已经在 jquery-ui css 文件之后添加了代码，它运行良好。

【解决方案2】：

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

你可以通过添加这个 css 来减小字体大小：

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

【讨论】：

是的，这是这种情况下的最终解决方案。它继承了字体大小来调整小部件的大小，减小字体会减小日历大小。

【解决方案3】：

我使用包装器解决了这个问题，并设置了一个 CSS 类来强制内联日期选择器的宽度为其父级的 100%，因此当您将日期选择器放在 .col 上时，例如，当行宽发生变化时，小部件会调整到其父级的宽度，当然可以达到限制，但可以接受。这对我在 bootstrap .col 中使用很有用，并且宽度会响应。

<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 样式之后。

用 sn-p 改变 #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>

【讨论】：

【解决方案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>

【讨论】：