{"id":30066,"date":"2017-05-26T21:01:42","date_gmt":"2017-05-26T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30066"},"modified":"2022-07-17T21:58:01","modified_gmt":"2022-07-17T13:58:01","slug":"custom-time-input-fields-timedropper","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/custom-time-input-fields-timedropper\/","title":{"rendered":"Custom Time Input Fields with jQuery Timedropper"},"content":{"rendered":"

Some web forms require date-based inputs<\/strong> and date picker plugins can help with that. But, what about time inputs<\/strong>?<\/p>\n

With the free jQuery plugin Timedropper<\/a><\/strong>, you can add custom time pickers<\/strong> for setting appointments, scheduling phone calls, or pretty much anything you need.<\/p>\n

Recommended Reading:<\/strong> A Look Into HTML5 Forms Input Types: Date, Color and Range<\/a><\/p>\n

It\u2019s incredibly simple and you only need the jQuery library<\/strong> to get started. Once you\u2019ve installed that library, you can add the Timedropper JS\/CSS files and let it run. That\u2019s it!<\/p>\n

\"Timedropper<\/a><\/figure>\n

Each input field must be targeted by a jQuery selector<\/strong> which then adds the Timedropper input field. This does have options<\/strong> you can add with extra (optional) features:<\/p>\n

    \n
  • Autoswitch<\/strong> \u2013 automatically changes hour\/minute when mousing up<\/li>\n
  • Meridians<\/strong> \u2013 set a 12-hour clock instead of a 24-hour<\/li>\n
  • Format<\/strong> \u2013 sets how the hours & minutes appear (default style is 1:22 pm)<\/li>\n
  • Mousewheel<\/strong> \u2013 enables time change based on wheel scroll<\/li>\n
  • Init_animation<\/strong> \u2013 turns on the fading animation effects<\/li>\n
  • setCurrentTime<\/strong> \u2013 automatically adds the current time to the field value<\/li>\n<\/ul>\n

    If you\u2019re even more daring you can change the style<\/strong> using a few pre-packed themes, or even build your own from scratch.<\/p>\n

    In a sea of jQuery plugins, Timedropper is the bee\u2019s knees. It really offers a unique interface<\/strong> for any app to select a time regardless of device.<\/p>\n

    Naturally, it is mobile-responsive<\/strong>, so it works on smartphones & tablets, too. However, I do not like the lack of num pad support<\/strong>. That seems like the obvious way to enter a time, so without that feature, it can feel limiting.<\/p>\n

    Still, for a unique interface<\/strong> and a simple setup<\/strong>, I do recommend Timedropper<\/a> for anyone willing to give it a shot.<\/p>\n

    You can find all the source code<\/strong> free on GitHub<\/a> and you\u2019ll find an incredibly simple demo in this pen<\/a>, embedded below.<\/p>\n

    If you have any other thoughts or suggestions feel free to share with the developer on Twitter @felice_gattuso<\/a>.<\/p>\n