jQuery Datepicker Width

问题

I don't understand why this is so hard to do. Everything about jQuery is so simple. How do you set the width of a jQuery "display: inline;" Datepicker?

I have edited the jquery ui css but as soon as I change the month it resets the width.

I hope this is just something dumb that I'm missing.

回答1:

If you are using the jQuery datepicker in its default form, then just add this to your css and it should work:

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

回答2:

Reducing the font size of the calendar will reduce the width of the date picker.

You can reduce the font size by adding this css:

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

回答3:

I solved this using a wrapper, and setting a CSS class to force the inline datepicker to have width 100% of its parent, so when you put the datepicker on a .col, for example, the widget adjust to the width of its parent when row width changes, up to a limit of course, but is acceptable. This was usefull for me to use inside a bootstrap .col and width will responsive.

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

Of course, you can put the style inside your site CSS file, but always after jQuery-ui styles.

Test with the snippet changing the width of #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>

来源：https://stackoverflow.com/questions/8206756/jquery-datepicker-width

标签

jquery-ui

jquery-ui-datepicker