Ниже мой код для клонирования таймпикера.

  • Я попытался удалить класс hasDatepicker при щелчке и попытался снова вызвать timepicker, но он не работает. Ниже мой код

$(document).ready(function() {
    var clone_index = 0;
    console.log(max_value);
    $("#add_period_break").click(function() {
        $(".start_time").removeClass('hasDatepicker');
        $('.start_time').timepicker({});
        clone_index = clone_index + 1;
        //$("#countform").val(clone_index);
        console.log("add" + clone_index);
        $(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));

        $("#clone" + clone_index).css("display", "inline");
        $("#clone" + clone_index + " :input").each(function() {
            $(this).attr("name", $(this).attr("name") + clone_index);
            $(this).attr("id", $(this).attr("id") + clone_index);
            $("#countform").val(clone_index);
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div  id='clone'>
    <div class="form-group">
    <label for="exampleInputEmail1">Start Time</label>
    <input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly"  value="" placeholder="Start Time">
    </div>
    </div>
    
    <div id="box-footer">                        
    <button type="button"  class="btn btn-success" name="add_period_break"  id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
    <button type="submit" class="btn btn-primary"> Submit</button>
    </div>
1
sivashanker 6 Окт 2018 в 09:47

1 ответ

Лучший ответ
  • Вы хотите использовать jQuery timepicker
  • Вам не нужно удалять класс hasDatepicker, потому что он никогда не будет ему назначен.
  • Также есть переменная max_value, которая не назначена. так что удалите его.

Пожалуйста, проверьте код ниже:

$(document).ready(function () {
    var clone_index = 0;

    $('.start_time').timepicker({});//For first time on page load

    $("#add_period_break").click(function () {
        clone_index = clone_index + 1;
        $(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));

        $("#clone" + clone_index).css("display", "inline");
        $("#clone" + clone_index + " :input").each(function () {
            $(this).attr("name", $(this).attr("name") + clone_index);
            $(this).attr("id", $(this).attr("id") + clone_index);
            $("#countform").val(clone_index);
        });
        $('.start_time').timepicker({});///to apply timepicker on newly added textbox
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>

<div id='clone'>
    <div class="form-group">
        <label for="exampleInputEmail1">Start Time</label>
        <input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
    </div>
</div>

<div id="box-footer">
    <button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
    <button type="submit" class="btn btn-primary"> Submit</button>
</div>
1
saAction 6 Окт 2018 в 07:09