Question

请不要将此标记为重复的问题。 stackoverflow上有类似的问题，但我找不到任何可行的解决方案。

我正在使用jQuery timepicker为两个不同的输入字段选择时间：＆＃34; id_reserve_time_start＆＃34;和＆＃34; id_reserve_time_end＆＃34;。

一旦用户在id_reserve_time_start字段中选择时间为11:00，我希望id_reserve_time_end的minTime为13:00，这是在id_reserve_time_start字段的所选时间之后2小时。因此，id_reserve_time_end字段的minTime应始终为id_reserve_time_start时间值的2小时。

我知道stackoverflow上有一些相关的问题，但它们都不适用于我。

以下两组代码只是将id_reserve_time_end的minTime设置为id_reserve_time_start的选定时间。我还没想出如何在id_reserve_time_start字段的选定时间添加2小时。

以下是第一次试用的一组代码。一旦我将id_reserve_time_start字段的时间选择为8:30，id_reserve_time_end的minTime就会设置为8:30。但是，即使我将id_reserve_time_start的时间更改为另一个时间为11:20，id_reserve_time_end的minTime仍然是8:30。那是为什么？

以下代码的jsfiddle在这里：jsfiddle1

<script>
    var min_time_val = '10:00';

    $(document).ready(function() {
        $("#id_reserve_time_start").timepicker({
            'timeFormat': 'H:i',
            'step': '10',
            'forceRoundTime': true,
            'scrollDefault': '08:00',

        }); 
    });

    $(document).ready(function() {
        $("#id_reserve_time_start").on('changeTime', 
            function(){
                min_time_val = $(this).val();

                $("#id_reserve_time_end").timepicker({
                    'timeFormat': 'H:i',
                    'step': '60',
                    'forceRoundTime': true,

                    minTime: $(this).val()
                });
            }
        );

    });
</script>

以下是与stackoverflow上类似问题相关的一些答案之后的另一个代码试验。即使在id_reserve_time_start字段中选择时间之后，id_reserve_time_end字段的minTime也没有像我计划的那样设置（这是id_reserve_time_end的minTime等于id_reserve_time_start字段的选定时间）

以下代码的jsfiddle在这里：jsfiddle2

<script>
    var min_time_val = '10:00';

    $(document).ready(function() {
        $("#id_reserve_time_start").timepicker({
            'timeFormat': 'H:i',
            'step': '10',
            'forceRoundTime': true,
            'scrollDefault': '08:00',
            'onSelect': function(){
                $("#id_reserve_time_end").timepicker('option',{'minTime': $(this).val(), 'timeFormat': 'H:i', 'step': '60'});
            }
        }); 
    });


    $(document).ready(function() {
        $("#id_reserve_time_end").timepicker({
            'timeFormat': 'H:i',
            'step': '60'
        });
    });
</script>

所以，我需要两方面的帮助：

如何根据id_reserve_time_start字段的选定时间设置id_reserve_time_end的minTime
如何在id_reserve_time_start字段的选定时间内添加2小时

Answer 1

尝试添加此功能。根据timepicker文档，调用标准onChange事件。所以我们得到改变的值，将字符串分成几小时和几分钟，然后加两小时。

$("#id_reserve_time_start").on('change', function(){
    var time = $(this).val();
    var getTime = time.split(":"); //split time by colon
    var hours = parseInt(getTime[0])+2; //add two hours
    //set new time
    var newTime = hours+":"+getTime[1];
    //set time picker
    $("#id_reserve_time_end").timepicker('option',{'minTime': newTime});
})

这是非常简陋的，它只适用于24小时格式时间。但希望它能帮助你走上正确的轨道。

jQuery timepicker：如何动态设置输入字段的{min}

1 个答案: