title: How do I get a jQuery UI Datepicker button inline with the input?
body: <p>In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:</p>
  
  <pre><code>$(".jqueryui-marker-datepicker").datepicker({
      dateFormat: "yy-mm-dd",
      changeYear: true,
      showOn: "button"
  }).next("button").button({
      icons: { primary: "ui-icon-calendar" },
      label: "Select a date",
      text: false
  });
  </code></pre>
  
  <p>Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some <code>aria</code> and validation <code>data</code> attributes:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="control-label col-md-2" for="Time"&gt;Date&lt;/label&gt;
      &lt;div class="col-md-10"&gt;
          &lt;input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02"&gt;
          &lt;button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date"&gt;
              &lt;span class="ui-button-icon-primary ui-icon ui-icon-calendar"&gt;&lt;/span&gt;&lt;span class="ui-button-text"&gt;Select a date&lt;/span&gt;
          &lt;/button&gt;
          &lt;span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem with this is that datepicker button appears below the date input. This is because the bootstrap <code>.form-control</code> class makes gives the input a <code>display: block</code>. If I edit this in Chrome's console to <code>inline-block</code> the button appears immediately to the right of the input, exactly where I want it.</p>
  
  <p>Now I could add a new css rule as follows:</p>
  
  <pre><code>.form-control.jqueryui-marker-datepicker {
    display: inline-block;
  }
  </code></pre>
  
  <p>but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing. </p>