title: Bootstrap DateTimePicker - how to set width
body: <p>Jade:</p>
  
  <pre><code>td
    #cpf2.input-group.date
      input(type="text",value=(event.EDATE),style="width:200px")
      span.input-group-addon
        span.fa.fa-calender(aria-hidden="true")
    script(type="text/javascript")
      $(function () {
        $('#cpf2').datetimepicker({
          format: "DD-MM-YYYYY HH:mm",
          icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down",
            previous: "fa fa-chevron-left",
            next: "fa fa-chevron-right"
          }
        });
      });
  </code></pre>
  
  <p>Output (on Chrome):</p>
  
  <p>As you can see in the image, the formatting of the datetimepicker element is messed-up, with a large gap between the date-input and the calender-span.</p>
  
  <p>Can anyone tell me how to resolve and be able to adjust the width of the entire datetimepicker element.</p>
  
  <p><a href="https://i.stack.imgur.com/2K606.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/2K606.jpg" alt="datetimepicker poor styling"></a></p>