CODEWITHSUNDEEP
javascriptjqueryhtml
sivashanker
sivashanker

Reputation: 99

On click and cloning timepicker cannot able to work

Below is my code for cloning the 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>

Upvotes: 1

Views: 60

Answers (1)

saAction
saAction

Reputation: 2065

  • You want to use jQuery timepicker
  • You don't need to remove hasDatepicker class, because its will never assigned to it.
  • Also there is a variable max_value which is not assigned. so please remove it.

Please check below code:

$(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>

Upvotes: 1

Related Questions