CODEWITHSUNDEEP
javascriptjquery
btaek
btaek

Reputation: 572

jQuery timepicker: how to dynamically set minTime of an input field

Please do not flag this as a duplicate question. There are similar questions on stackoverflow, but I was not able to find any working solution.

I am using jQuery timepicker to select time for two different input fields: "id_reserve_time_start" and "id_reserve_time_end".

Once a user selects time in id_reserve_time_start field as 11:00, I want the minTime of id_reserve_time_end be 13:00, which is 2 hours after the selected time of id_reserve_time_start field. So, minTime for id_reserve_time_end field should be always 2 hours later of id_reserve_time_start time value.

I know there are some related questions on stackoverflow, but none of them worked for me.

The two sets of code below are simply setting minTime of id_reserve_time_end as the selected time of id_reserve_time_start. I have not figured out how to add 2 hours to selected time of id_reserve_time_start field.

Here is a set of code for the first trial. Once I select the time for id_reserve_time_start field as 8:30, minTime of id_reserve_time_end does get set to 8:30. However, even if I change the time of id_reserve_time_start to another time as 11:20, the minTime of id_reserve_time_end is still 8:30. Why is that?

jsfiddle for the code below is here: 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>

Here is another trial of code following some of answers related to similar questions on stackoverflow. Even after selecting time in id_reserve_time_start field, minTime for id_reserve_time_end field is not set as I plan to (which is minTime of id_reserve_time_end being equal to the selected time of id_reserve_time_start field)

jsfiddle for the code below is here: 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>

So, I need help on two things:

  1. how to set minTime of id_reserve_time_end according to selected time of id_reserve_time_start field
  2. how to add 2 hours to the selected time of id_reserve_time_start field

Upvotes: 1

Views: 9634

Answers (1)

cbronson
cbronson

Reputation: 386

Try adding this function. According to the timepicker docs a standard onChange event is called. So we get the changed value, split the string into hours and minutes and add two hours.

$("#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});
})

This is pretty rudimentary and it will only work with 24 hour format time. But hopefully it helps you get on the right track.

Upvotes: 3

Related Questions