title: Can I get timepicker to fire on a click in the input field?
body: <p>I have spent HOURS trying to get any new timepicker to work (previously used <a href="https://github.com/weareoutman/clockpicker" rel="nofollow">https://github.com/weareoutman/clockpicker</a> which was great but always went off screen on mobile phones).</p>
  
  <p>Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got <a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow">https://github.com/Eonasdan/bootstrap-datetimepicker</a> going (not great on a mobile but...)</p>
  
  <p>My problem is I have lots of tiny <code>input</code> fields for dates so I need to get rid of the glyphicon and just <code>onclick</code> on the <code>input</code> field itself.</p>
  
  <p>I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" /&gt;
          &lt;link type="text/css"  rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" /&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/beta022/bootstrap/js/moment.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;        
          &lt;script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;div class="container"&gt;
  
      &lt;div class="row"&gt;
          &lt;div class='col-sm-6'&gt;
              &lt;form class="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class='input-group date' id='datetimepicker4'&gt;
                      &lt;input type='text' class="form-control" /&gt;
                      &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/form&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              $(function () {
                  $('#datetimepicker4').datetimepicker({
                      pickDate: false,  minuteStepping:5, 
                  });
              });
          &lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;        
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> This is beyond weird. Got rid of the glyphicon. Put the other <code>span</code> around the <code>input</code>. Works but with a big ugly border. Tried disabling the <code>input-group-addon</code> <code>class</code> by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that <code>class</code> and it stopped working. So looks like some sort of <code>regex</code> within <code>span</code> is going on. </p>
  
  <p>I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.</p>