Format the number before time, for example hh: mm

Question

I have an iput field:

<input type="text" name="time" class="time" value="3" /> 

I need this value to be like 03:00

Additional examples of what I need:

 1 = 01:00 12 = 12:00 12:2 = 12:20 2:2 = 02:20 02:2 = 02:20 340 = 340:00 340:1 = 340:10 

You know the rest. How can I solve this in jquery / javascript?

This is what I am trying to use in jQuery:

 $('input').blur(timeFormat); function timeFormat(e){ skjema.find('input.tid').each(function(){ if($(this).val().length != 0){ var tid = $(this).val().toString(); if(tid.length == 1){ $(this).val(String("0" + tid)); } if(tid.indexOf(':') == -1){ $(this).val(tid.toString() + ':00'); } } }); } 

This is what I did now, and it does the job, but it is somewhat cumbersome :)

 function timeFormat(e){ skjema.find('input.tid').each(function(){ if($(this).val().length != 0){ var tid = $(this).val().toString(); tid = (tid.length == 1) ? '0' + tid : tid; tid = (tid.indexOf(':') == -1) ? tid + ':00' : tid; if(tid.indexOf(':') != -1){ var arr = tid.split(':'); var before = arr[0].toString(); var after = arr[1].toString(); before = (before.length == 0) ? '00' : before; before = (before.length == 1) ? '0' + before : before; after = (after.length == 0) ? '00' : after; after = (after.length == 1) ? after + '0' : after; console.log('before: ' + before + ' After: ' + after); tid = before + ':' + after; } } $(this).val(tid); }); } 

Answer 1

You can do this with a simple simple expression:

 function time( str ) { if ( !/:/.test( str ) ) { str += ':00'; } return str.replace(/^\d{1}:/, '0$&').replace(/:\d{1}$/, '$&0' ); } 

If you want to make sure that only the expected format is accepted, add this line at the top of the function:

 if ( /[^:\d]/.test( str ) ) { return false; } 

Demo: http://jsfiddle.net/elclanrs/MzgMz/

Answer 2

You can try something like this using the datejs library: -

  var dateString = "12"; var date = new Date.parseExact(dateString, "hh:mm"); 

Answer 3

check out demo

 $('input').blur(timeFormat); function timeFormat(e){ $("div").find('input').each(function(){ if($(this).val().length != 0){ var tid = $(this).val().toString(); if(tid.length == 1){ $(this).val(String("0" + tid)); } if(tid.indexOf(':') == -1){ $(this).val(tid.toString() + ':00'); } if(tid.indexOf(':') == 2){ $(this).val(tid.toString() + '0'); } } }); }​ 

Answer 4

Pseudo:

• val ← value from the field ( $('.time').val() )
• colonPos ← position . in val
• If colonPos is -1, result ← padZero(val) + ':00'
• Else, result ← padZero(val[:colonPos]) + ':' + padZero(val[colonPos + 1:])

Answer 5

 function prettyTime(t){ // will output a time providing leading zeros and minute field // (doesn't need jQuery) x=t.split(":"); for (var i=0; i<2; i++) x[i] = (x[i]) ? Array(3-x[i].length).join('0') + x[i] : '00'; return x.join(":"); } // -- $('input').blur(timeFormat); function timeFormat(e){ skjema.find('input.tid').each(function(){ $(this).val(function(i, v) { return prettyTime(v); }) }); } 

Answer 6

 <title>Insert Colon in the Time Format</title> <script type="text/javascript"> function formatTime(objFormField){ intFieldLength = objFormField.value.length; if(intFieldLength==2 || intFieldLength == 2){ objFormField.value = objFormField.value + ":"; return false; } } </script> Enter time <input type="text" maxlength="5" minlength="5" onKeyPress="formatTime(this)"/> 

Answer 7

Perhaps you can try this plugin .. worked for me

Examples of using:

 $("#tbPlain").timefield(); $("#tb12Hour").timefield({ 'hourFormat': '12'}); $("#tb24Hour").timefield({ 'hourFormat': '24'}); $("#tbWithInvalidHandler").timefield({ 'hourFormat': '24', 'onError' : function(){ alert(this.value+' is not a valid time!'); this.style.backgroundColor='red'; } }); $("#tbOnOff").timefield(); $("#btnTurnOff").click(function(){ $("#tbOnOff").timefield('turnOffTimeField'); }); 

Live example:

https://jsfiddle.net/sajjansarkar/bst3cw2g/