[Solved] I need a duration picker in javascript

by


For days field, just copy the format of other fields and update the value from 60 to 24.

But as you mentioned about change values from keyboard, you should choose form events or keyboard events to do that. In this demo, I chose the blur event because it will trigger when the input loses focus.

$("input[name="value"]").blur(function() {
     var id = $(this).prop('id');
     $("#" + id).spinner('stepUp');
     $("#" + id).spinner('stepDown');
 });

After you add the keyboard event, you should consider about the user input a number more than 60 seconds. There is one example, In your original code, if user input 130 into the second field it will update to 1 minute and 70 seconds but not 2 minutes and 10 seconds.

You can use mod to fix that.

$('#seconds').spinner({
     spin: function (event, ui) {
         if (ui.value >= 60) {
             $('#minutes').spinner('stepUp', ui.value / 60);
             $(this).spinner('value', ui.value % 60);
             return false;
         } else if (ui.value < 0) {
             if($('#minutes').spinner('value') > 0) {
                 $(this).spinner('value', ui.value + 60);
                 $('#minutes').spinner('stepDown');
             }
             return false;
         }
     }
 });

Here is the Jsfiddle.

solved I need a duration picker in javascript