How to get Materialized date & time picker to function within a modal?

Question

I've added a date picker and time picker into the in a modal with Materialize CSS but when I try to select a time the time window closes. When I select a date value the calendar changes the month but retains the selected date. See the fiddle:

I've tried moving the picker outside of the modal which functions correctly.

https://jsfiddle.net/brandon007pillay/8hu07n63/21/#&togetherjs=P9OVMoeDqi

   <div id="test1" class="col s12">
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light btn modal-trigger" href="#tasksInAddModal">Modal</a>
       <!-- Modal Structure - tasksInADDModal-->
       <div id="tasksInAddModal" class="modal">
         <div id="modal1"class="modal-content">
           <!--tasksInAddForm-->
           <div class="row">
               <h4  data-tooltip="Client" id="tasksInAddModalHeading">Edit/Add</h4>
               <form class="col s12" id="tasksInAddModalForm">

                 <div class="row">
                   <div class="input-field col s12">
                     <label>
                       <input id="tasksInAddModal_checkbox_induction" type="checkbox" />
                       <span>Induction Required</span>
                     </label>
                   </div>
                 </div>
                 <!--Induction dropdown content:-->
                 <div  hidden id="tasksInAddModal_checkbox_induction_content" class="row scale-transition">
                   <div class="col s12">
                     <p>
                       <label>
                         <span>FUNCTIONS PROPERLY</span>
                         <input type="time" name="usr_time">
                       </label>
                     </p>
                     <label>
                       <span>NOT ALLOWING ME TO CHOOSE THE TIME</span>
                       <input type="text" class="timepicker">
                     </label>
                      <label>
                        <span>NOT ALLOWING ME TO CHOOSE THE DATE</span>
                        <input type="text" class="datepicker">
                      </label>
                   </div>
                 </div><!--Induction dropdown content:-->
               </form>
            </div><!--wraps form this one-->
         </div>
         <div class="modal-footer">
           <a href="#!"  id="tasksInAddModalUpload" class="waves-effect waves-green btn-flat">Submit</a>
         </div>
       </div><!--End of .modal-->
     </div>

I want to be able to select a time value. I also want to maintain the same month view when a date is clicked.

Answer 1

The div tags where incorrectly nested. This is the proper orientation:

  <!--Induction dropdown content:-->
    <div  hidden id="tasksInAddModal_checkbox_induction_content" class="row">
       <div class=" input-field col s4">
          <input type="time" id="tasksInAddModal_induction_duration" class="datepicker">
          <label for="tasksInAddModal_induction_duration">Soonest Induction Date</label>
       </div>
       <div class=" input-field col s4">
          <input type="text" id="tasksInAddModal_induction_time" class="timepicker">
          <label for="tasksInAddModal_induction_time">Next available meeting time</label>
       </div>
       <div class=" input-field col s4">
          <input type="text" id="tasksInAddModal_induction_date" class="datepicker">
          <label for="tasksInAddModal_induction_date">Soonest Induction Date</label>
       </div>
    </div>