Geek Answers Handbook

Datepicker jQuery Width

I don’t understand why this is so difficult. Everything about jQuery is so simple. How to set jQuery width "display: inline;" Datepicker?

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

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

+7
source share
4 answers

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

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

Decreasing the font size on 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;
}
+10
source

, CSS, 100% , , .col, , , , , , . , .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.

, #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>
Hide result

0
.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>
-2

More articles:


All Articles