Question

我已在Materialize CSS的模态中将日期选择器和时间选择器添加到，但是当我尝试选择时间时，时间窗口关闭。当我选择一个日期值时，日历会更改月份，但会保留所选的日期。参见小提琴：

我尝试将选取器移到功能正常的模态之外。

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>

我希望能够选择一个时间值。我也想在单击日期时保持相同的月份视图。

Answer 1

div标签嵌套不正确。这是正确的方向：

  <!--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>

如何使物化日期和时间选择器在模态中运行？

1 个答案: