**below is the code for the modal that works:**

​

<div class="md-form md-outline input-with-post-icon datepicker" id="customDays">

                    <input placeholder="Select date" type="text" id="Customization" class="form-control green-text">

                    <label class="green-text" for="Customization">When...</label>

                    <i class="fas green-text fa-calendar input-prefix" tabindex=0></i>

                </div>

​

​

**Below is the code for the blue calendar that isn't in line with the input but does fire a:**

​

<div class="col-4">

<div id="date-picker-example" class="md-form md-outline input-with-post-icon datepicker">

  <input placeholder="Select date" type="text" id="example" class="form-control">

  <label for="example">Try me...</label>

 <i class="fas fa-calendar input-prefix" tabindex=0></i>

</div></div>

​

​

**Below is the code for the green calendar that is inline but wont fire a calender modal :**

​

<div class="md-form md-outline input-with-post-icon datepicker" id="customDays">

                    <input placeholder="Select date" type="text" id="Customization" class="form-control green-text">

                    <label class="green-text" for="Customization">When...</label>

                    <i class="fas green-text fa-calendar input-prefix" tabindex=0></i>

                  </div>

​

​

<script>

​

$('.datepicker').datepicker();

​

</script>