如何添加和删除时间或日期选择器实现？答案

【问题标题】：How to add and remove time or date picker materialize?如何添加和删除时间或日期选择器实现？
【发布时间】：2018-06-29 03:07:11
【问题描述】：

我遇到了一个问题，我想创建多个时间字段，但单击添加按钮就像添加动态输入字段一样。但是当我在动态创建的输入字段上触发时间时，它不起作用。请帮助我附上下面的代码sn-p以供参考。

            <div class="row slot-container">
                <div class="input-field col s12">
                    <input type="text" placeholder="select date for demo" class="datepicker">
                </div>
                <div class="input-field col s6">
                    <input type="text" placeholder="from" class="timepicker">
                </div>
                <div class="input-field col s6">
                    <input type="text" placeholder="to" class="timepicker">
                </div>
            </div>
            <a class="waves-effect waves-light btn addSlots">Add Slots</a>
$(function(){
     $('.timepicker').pickatime({
       default: 'now', // Set default time: 'now', '1:30AM', '16:30'
       fromnow: 0, 
       twelvehour: true, // Use AM/PM or 24-hour format
       donetext: 'OK', // text for done-button
       cleartext: 'Clear', // text for clear-button
       canceltext: 'Cancel', // Text for cancel-button,
       container: 'body', // ex. 'body' will append picker to body
       autoclose: false, // automatic close timepicker
       ampmclickable: true, // make AM PM clickable
       aftershow: function(){} //Function for after opening timepicker
    });

    $(document).on('click','.addSlots',function(){
      $('.slot-container').after("<div class='row slot-container'><div class='input-field col s6'> <input type='text' placeholder='from' class='timepicker'> </div> <div class='input-field col s6'> <input type='text' placeholder='to' class='timepicker'> </div> </div>");
      });
    });

【问题讨论】：

你的意思是你想在每次点击添加按钮时创建时间选择器
我可以创建时间选择器字段，但无法从动态创建的字段中触发时间选择器。

标签： javascript jquery html materialize

【解决方案1】：

只是改变第一行。之前：

$(function(){

之后：

$(document).on('focus','.timepicker',function(){

【讨论】：

【解决方案2】：

请尝试

$(function(){
    $(document).off('click','.addSlots').on('click','.addSlots',function(){
      $('.slot-container').after("<div class='row slot-container'><div class='input-field col s6'> <input type='text' placeholder='from' class='timepicker'> </div> <div class='input-field col s6'> <input type='text' placeholder='to' class='timepicker'> </div> </div>");
      });
    });

【讨论】：