Question

我有两个时间戳开始时间和结束时间。当我选择开始时间时，结束时间应该在开始时间之前禁用所有时间。我有添加按钮。当点击添加按钮时，再次添加两个时间选择器。在这两个中，我无法从开始时间设置结束时间戳的最小时间。这是代码

<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
            }
        });
        }

对于timepicker1和2它的工作正常。对于动态创建的时间戳，我无法设置注释和最大日期。任何人都可以帮助我......

Answer 1

我自己解决了这个问题。我没有给出＃timepickerb＆＃39; + k，而是把它存储在一个变量中。这解决了我的问题。

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

Jquery Time Picker动态地根据开始时间设置endtime的最终时间

1 个答案: