title: How to set date-picker with JQuery 3.3.1 and Bootstrap 3.3.7?
body: <p>I have to set date picker for input fields in few different forms. In the past I have used jQuery date-picker but for this project I use Bootstrap 3 so there is another method that is available. Here is example that I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.datepick').datetimepicker();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!---*** Start: JQuery 3.3.1 version. ***---&gt;
  &lt;script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!---*** End: JQuery 3.3.1 version. ***---&gt;
  &lt;!---*** Start: Bootstrap 3.3.7 version files. ***---&gt;
  &lt;script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;!---*** End: Bootstrap 3.3.7 version files. ***---&gt;
  
  &lt;script language="javascript" src="https://momentjs.com/downloads/moment.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css"&gt;
  
  &lt;div class="form-group required"&gt;
    &lt;div class="input-group"&gt;
      &lt;input type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required&gt;
      &lt;div class="input-group-addon"&gt;
        &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see that snippet above works but there is few things that I would like to modify. First I would like input field to be <code>readonly</code>. User should be able to click on calendar icon and then chose <code>date only</code>. I do not need time next to the date. Clicking on the icon will prevent user to enter what ever they want. I'm wondering if there is a way to achieve this with date-picker in bootstrap and jquery? </p>