在文本框模糊事件中以 24 小时格式格式化时间

Question

i have created two text box which will take time as input from user i want when user press tab key the value of text box converted to 24 hour format i have written a method

    function getFormattedTime(value) {
    var time = j$.trim(value);
    var len = time.length;
    var result = "";

    var pos = time.indexOf(":");
    if (pos < 0) {
        pos = time.indexOf(".");
    }
    if (time.indexOf('m') < 0 && pos < 0 && parseInt(time) > 12
            && parseInt(time) < 12) {
        time = time + 'm';
    }
    if (time.indexOf('m') > 0) {
        time = parseFloat(time.substring(0, time.indexOf('m')));
        if (isNaN(time)) {
            window
                    .alert("Hours entered is invalid [00:00] or [00.00] or [00h] or [00m]");
            return "";
        } else {
            if (time > 59) {
                result = parseInt(time / 60);
                result = result + ":" + (time - (result * 60));
            } else {
                result = "00:"
                        + (parseFloat(time) <= 9 ? "0" + time : time);
            }
        }
        return result;
    }
    var hour = "00";
    if (time.charAt(0) == '0') {
        hour = '0'
                + (parseFloat(time.substring(1, 2)) ? parseFloat(time
                        .substring(1, 2)) : '0');
    } else {
        hour = (parseFloat(time.substring(0, 2)) ? parseFloat(time
                .substring(0, 2)) : '00');
        hour = (hour > 24 ? 24 : (hour < 10 ? (hour == 0 ? '00' : '0'
                + hour) : hour));
    }
    var mins = "00";
    if (pos != -1) {
        if (time.charAt(pos + 1) == '0') {
            mins = '0'
                    + (parseFloat(time.substring(pos + 2, pos + 3))
                            ? parseFloat(time.substring(pos + 2, pos + 3))
                            : '0');
        } else {
            mins = (parseFloat(time.substring(pos + 1, 5))
                    ? parseFloat(time.substring(pos + 1, 5))
                    : '00');
            mins = (mins >= 60 ? 59 : (mins < 10 ? (mins >= 6 ? 59 : mins
                    + '0') : mins));
            mins = (hour == 24 ? 45 : mins);
        }
    }
    result = hour + ":" + mins;
    return result;
}

It is working fine for following format

1.) 0 - 00:00 2.) 9.3 - 09:30 3.) 13.3 - 13:30 4.) 9 - 09:00

but when i enter

1352 it should give me 13:52 but it is giving 13:00 where i did wrong any help?

Answer 1

you are setting mins to the string '00' in that case. So you are comparing a string to a number multiple times in the second line. Eventually setting mins to itself, '00'.

             mins = (parseFloat(time.substring(pos + 1, 5))                        ? parseFloat(time.substring(pos + 1, 5))
                    : '00');
             mins = (mins >= 60 ? 59 : (mins < 10 ? (mins >= 6 ? 59 : mins.                        + '0') : mins));
             mins = (hour == 24 ? 45 : 

Answer 2

What happens when pos is -1? Well, when pos is -1, you're left with:

var mins = "00";
//...
result = hour + ":" + mins;

How does pos end up being -1? Well, any time that time doesn't contain a colon or period:

var pos = time.indexOf(":");
if (pos < 0) {
    pos = time.indexOf(".");
}

In particular, mins will be "00" when time is 1352. You need an else branch on your final if to handle the case when there is no colon or period.

Answer 3

How about

DEMO HERE

<style>
#time { width:50px; border:0; text-align:right}
select {text-align:right}
</style>
<script>
var mil = false; // use am/pm

window.onload=function() {
  var hour = document.getElementById("hour");
  var min = document.getElementById("minutes");
  var ampm = document.getElementById("ampm");

  for (var i=0;i<24;i++) {
    var val = i<10&&mil?"0"+i:i;
    if (!mil &&  val>12) val-=12;
    hour.options[i]=new Option(val,i);
  }
  for (var i=0;i<60;i++) {
    var val = i<10?"0"+i:i;
    min.options[i]=new Option(val,i);
  }
  hour.onchange=function() {
    if (!mil) ampm.innerHTML=(hour.selectedIndex)<12?"am":"pm";
    document.getElementById("time").value=hour.options[hour.selectedIndex].text+":"+min.value;
  }
  min.onchange=function() {
    hour.onchange();
  }
  var now = new Date();
  hour.selectedIndex=now.getHours();
  min.selectedIndex=now.getMinutes();
  hour.onchange();

}
</script>
<select id="hour" name="hour"></select>:<select id="minutes" name="minutes"></select>
<input type="text" id="time" name="time" readonly="readonly"  /><!-- hidden or in another form --><span id="ampm"></span>