Bootstrap 4 + jQuery Datepicker

save me. added font awesome

by grant

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form class="form-horizontal">
  <div class="form-group">
    <label for="input1" class="control-label col-sm-2">name</label>
    <div class="col-sm-9">
      <input type="text" id="input1" name="input1" placeholder="bootstrap/4.0.0-beta.2/css" class="form-control" />
    </div>
  </div>

  <div class="form-group">

    <div class="col-sm-3">
      <div class='input-group'>
        <input type='text' id="input2" name="input2" placeholder="yyyy-mm-dd" class="date-picker form-control" />
        <label for="input2" class="input-group-addon btn">
          <i class="fa fa-calendar "></i>
        </label>
      </div>
    </div>

  </div>
  <p>
  can some one explain how to save a fiddle. jeez. Don't. I'm just frustrated with the lack of a simple save button. I'm sure there is a reason. don't answer that either. 
  </p>
</form>

CSS

form {
  padding: 10px;
}

p {
  padding: 10px;
}

.modal-open .ui-datepicker {
  z-index: 1151 !important;
}

JavaScript

$(".date-picker").datepicker({
  dateFormat: 'yy-mm-dd'
});