Search the Community

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