Jquery Timepicker Start and End time Dynamically

[rekha_prabhu]

Hi,

I have two timepickers start time and end time.When I select start time,the end time should have all the times disabled before start time.I am having Add button.When add button is clicked,again two timepickers are added.In these two,I can't able to set mintime of end timepicker from start time.Here is the code

   

<div  id='adddiv'>
    <input type="hidden" name="count" id="count">
     <p>From:<input type="text" style="width: 70px;" id="timepicker1" name="visiting_time_start"/>
    To:<input type="text" style="width: 70px;" id="timepicker2" name="visiting_time_end"/>
     <a href='#' id='sadd'><img src="<?php echo base_url();?>template/images/plus_button.png" alt="Add"></a>
     </p></div>

    $(document).ready(function() {
            var addDiv = $('#adddiv');
            var i = $('#adddiv p').size() + 1;
            var j=0;var k=i-1;
            $('#sadd').unbind("click").on('click', function() {
              var aid="timepickera"+k;
            var    bid="timepickerb"+k;
            
                $('<p>From:<input type="text" id='+aid+' style="width: 70px;" name="visiting_time_start' + i +'" value="" />To:<input type="text" id='+bid+' style="width: 70px;" name="visiting_time_end' + i +'" value="" /><a href="#" id="srem"> <img src="<?php echo base_url();?>template/images/remove.jpg" height=16 width=16 alt="Remove"></a> </p>').appendTo(addDiv);
                $('#timepickera'+k).timepicker({
                   showLeadingZero: false,
                onSelect: function( time, endTimePickerInst ) {
                t1=time;
                $("#timepickerb"+k).timepicker('option', {                    
                   minTime: {
                   hour: endTimePickerInst.hours,
                   minute: endTimePickerInst.minutes
                   }
               });
            },
                
                   minTime: {
                       hour: 10, minute: 00
                   }
               });
            $('#timepickerb'+k).timepicker({
                
                   showLeadingZero: false,
                   
                   
               });
                i++;j++;k++;
                $('#count').val(j);
                return false;
            });
            $(document).on('click', '#srem' , function(){
                
                if( i > 2 ) {
                $(this).parents('p').remove();
                i--;j--;k--;
                $('#count').val(j);
                }
                return false;
            });
            

             $('#timepicker1').timepicker({
                   showLeadingZero: false,
                onSelect: tpStartSelect,
                   minTime: {
                       hour: 10, minute: 00
                   }
               });
            $('#timepicker2').timepicker({
                   showLeadingZero: false,
                   onSelect: tpEndSelect,
                   
               });
        
            });
            
        
            // when start time change, update minimum for end timepicker
            function tpStartSelect( time, endTimePickerInst ) {
            $('#timepicker2').timepicker('option', {
                   minTime: {
                   hour: endTimePickerInst.hours,
                   minute: endTimePickerInst.minutes
                   }
               });
            }

            // when end time change, update maximum for start timepicker
            function tpEndSelect( time, startTimePickerInst ) {
               $('#timepicker1').timepicker('option', {
                   maxTime: {
                   hour: startTimePickerInst.hours,
                   minute: startTimePickerInst.minutes
                   }
               });
            }

For timepicker1 and 2 its working fine.For dynamically created timepickers,I am not able to set mindate and max date.Can anyone help me...
 

[rekha_prabhu]

Hi,

 

I myself solved the issue.Instead of giving '#timepickerb'+k,I have stored this in a variable.This solved my issue.

var bid="timepickerb"+k;
onSelect: function( time, endTimePickerInst ) {
                t1=time;
                $("#"+bid).timepicker('option', {                    
                   minTime: {
                   hour: endTimePickerInst.hours,
                   minute: endTimePickerInst.minutes
                   }
               });