JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

Choose your time:

<br />
<br />


<input type='text' name='sometime' id='sometime' value='4:00PM' />

CSS

.timify-wrapper {
 border: solid 1px #ccc;
padding: 2px;    
 display:inline-block;
}
.timify-wrapper.focused {
 border: solid 1px orange;
}

.timify-wrapper input:focus  {
 outline: none;   
}
.timify-wrapper input  {
 border: solid 0px #ccc;
width: 20px;    
    font: 13px arial!important;
}
.hour { text-align: right; }

.timify-wrapper .timify{
    display:block;
    opacity: .4;
    width: 80%;
    display:none;
}

JavaScript

(function($) {
    
$.fn.timify = function() {
    
    return this.each(function() {
        if ($(this).is("input")) {
            build($(this));
        }            
    });
    function multiplier (evt) {
        if(evt.shiftKey) { return 5; }                
   
        return 1;
    }
    
    function build(el) {
        el.addClass("timify").wrap("<div class='timify-wrapper' />");
        var wrapper = el.closest(".timify-wrapper");
        wrapper.append("<input type='text' value='04' class='hour timify-helper' data-max='12' data-min='1' />:");
        wrapper.append("<input type='text' value='00' class='minute timify-helper' data-max='59' data-min='0' />");
        wrapper.append("<input type='text' value='AM' class='ampm timify-helper' />");
        wrapper.bind("click", function(e) {
            if (!$(e.target).is("input")) {
            wrapper.find(".hour").focus();
            }
        });
        wrapper.delegate("input", "focus", function(e) {
            setTimeout(function() {
                
           wrapper.addClass("focused"); 
            }, 0);
        });
        
        wrapper.delegate("input", "blur", function(e) {
           wrapper.removeClass("focused"); 
        });
        
        wrapper.delegate("input", "change input", function(e) {
               
            if ($(this).is(".timify")) {
             return;   
            }
               var wrapper = $(this).closest(".timify-wrapper");
               var minutes = wrapper.find(".minute").val();        
               var hours = wrapper.find(".hour").val();        
               var am = wrapper.find(".ampm").val();     
               wrapper.find(".timify").val(       
                   hours + ":" + minutes + " " + am
               );                       
        });
        
        
        wrapper.delegate("input", "keydown", function(e) {
            
            if (!$(this).hasClass("timify-helper")) {
                   return;        
            }
...