{"id":30468,"date":"2023-01-15T03:04:44","date_gmt":"2023-01-14T21:34:44","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/"},"modified":"2023-01-15T03:04:44","modified_gmt":"2023-01-14T21:34:44","slug":"solved-i-need-a-duration-picker-in-javascript","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/","title":{"rendered":"[Solved] I need a duration picker in javascript"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

For days<\/code> field, just copy the format of other fields and update the value from 60 to 24.<\/p>\n

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

$(\"input[name=\"value\"]\").blur(function() {\n     var id = $(this).prop('id');\n     $(\"#\" + id).spinner('stepUp');\n     $(\"#\" + id).spinner('stepDown');\n });\n<\/code><\/pre>\n
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<\/code> into the second<\/code> field it will update to 1 minute and 70 seconds<\/code> but not 2 minutes and 10 seconds<\/code>.<\/p>\n
You can use mod<\/code> to fix that.<\/p>\n
$('#seconds').spinner({\n     spin: function (event, ui) {\n         if (ui.value >= 60) {\n             $('#minutes').spinner('stepUp', ui.value \/ 60);\n             $(this).spinner('value', ui.value % 60);\n             return false;\n         } else if (ui.value < 0) {\n             if($('#minutes').spinner('value') > 0) {\n                 $(this).spinner('value', ui.value + 60);\n                 $('#minutes').spinner('stepDown');\n             }\n             return false;\n         }\n     }\n });\n<\/code><\/pre>\n
Here is the Jsfiddle<\/a>.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved I need a duration picker in javascript <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,388],"class_list":["post-30468","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jquery"],"yoast_head":"\n[Solved] I need a duration picker in javascript - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] I need a duration picker in javascript - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] 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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-14T21:34:44+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] I need a duration picker in javascript\",\"datePublished\":\"2023-01-14T21:34:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\"},\"wordCount\":118,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\",\"name\":\"[Solved] I need a duration picker in javascript - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-14T21:34:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] I need a duration picker in javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] I need a duration picker in javascript - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] I need a duration picker in javascript - JassWeb","og_description":"[ad_1] 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 ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/","og_site_name":"JassWeb","article_published_time":"2023-01-14T21:34:44+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] I need a duration picker in javascript","datePublished":"2023-01-14T21:34:44+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/"},"wordCount":118,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/","url":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/","name":"[Solved] I need a duration picker in javascript - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-14T21:34:44+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-i-need-a-duration-picker-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] I need a duration picker in javascript"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=30468"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30468\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=30468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=30468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=30468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}