<div class="container">
  <div class="row styling">
      <h3><strong>Bootstrap Datepicker</strong></h3><br>
      <div class='col-sm-offset-4 col-sm-4'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control input-lg" />
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>
        <p class="help-block"><strong>Date format:</strong> yyyy-mm-dd</p>
      </div>
    </div><br>
  
    <div class="row">
      <pre>
        <ul>
          <h4><strong>Add External CSS</strong></h4>
          <li>//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css</li>
          <li>https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css</li>
          <li>//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</li>
        </ul>
      </pre>
    </div><br>
  
    <div class="row">
      <pre>
        <ul>
          <h4><strong>Add External JavaScript</strong></h4>
          <li>//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js</li>
          <li>//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js</li>
          <li>//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js</li>
          <li>//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js</li>
        </ul>
      </pre>
    </div>
  
  </div>

/* Just for styling */
.styling {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  /* height: 150px;
  overflow: auto; */
}

 $(function () {
   var bindDatePicker = function() {
    $(".date").datetimepicker({
        format:'YYYY-MM-DD',
      icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down"
      }
    }).find('input:first').on("blur",function () {
      // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
      // update the format if it's yyyy-mm-dd
      var date = parseDate($(this).val());

      if (! isValidDate(date)) {
        //create date based on momentjs (we have that)
        date = moment().format('YYYY-MM-DD');
      }

      $(this).val(date);
    });
  }
   
   var isValidDate = function(value, format) {
    format = format || false;
    // lets parse the date to the best of our knowledge
    if (format) {
      value = parseDate(value);
    }

    var timestamp = Date.parse(value);

    return isNaN(timestamp) == false;
   }
   
   var parseDate = function(value) {
    var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
    if (m)
      value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

    return value;
   }
   
   bindDatePicker();
 });