Search code examples
javascriptdatetimetimecomparison

Javascript 12 Hour to 24 Format convertor


Is there any way i could convert a 12hour time format into a 24 hour format in JS? I'm not that good with JavaScript at all so still surprised i could manage to get even this far.

What i'm trying to do is convert time from 12 hour to 24 hour so i can do comparison, like if endDate is greater than startDate, but what i cant understand is how to convert the 12 hour format i receive to a valid 24hour format.

$('#de_endTime').bind('blur', function()
{
    sDate = $('#de_startDate').val();
    startTime = $('#de_startTime').val();
    endTime = $('#de_endTime').val();

    if (startTime == ""){
        alert("First input the start time");
        $('#de_startTime').focus();
    }

    dSplit = sDate.split("-");
    dYear = dSplit[0];
    dMonth = dSplit[1] - 1;
    dDay = dSplit[2];

    stSplit = startTime.split(":");
    stHour = stSplit[0];
    stMin = stSplit[1].split(" ")[0];
    stAmPm = stSplit[1].split(" ")[1];

    etSplit = endTime.split(":");
    etHour = etSplit[0];
    etMin = etSplit[1].split(" ")[0];
    etAmPm = etSplit[1].split(" ")[1];

    fullStartDate = getDateObject(dYear, dMonth, dDay, stHour, stMin);
    fullEndDate = getDateObject(dYear, dMonth, dDay, etHour, etMin);

    if (fullStartDate - fullEndDate > 0){
        alert("Start Time cannot be higher than End Time!");
    }
});

Here is the getDateObject() function

function getDateObject(year, month, day, hours, minutes) {
  var newDate = new Date();
  newDate.setFullYear(year);
  newDate.setMonth(month);
  newDate.setDate(day);

  newDate.setHours(hours);
  newDate.setMinutes(minutes);
  newDate.setSeconds(0);
  newDate.setMilliseconds(0);
  return newDate;
}

I'm not sure if i've provided enough detail, but please let me know if didnt :) Thanks :)

[ EDIT ] The new code, which seems to be outputting everything fine so far :)

$('#de_endTime').bind('blur', function()
{
    sDate = $('#de_startDate').val();
    startTime = $('#de_startTime').val();
    endTime = $('#de_endTime').val();

    if (startTime == ""){
        alert("First input the start time");
        $('#de_startTime').focus();
    }

    dSplit = sDate.split("-");
    dYear = dSplit[0];
    dMonth = dSplit[1];
    dDay = dSplit[2];

    fullIsoDate = dMonth + "/" + dDay + "/" + dYear;
    //alert(fullIsoDate);

    var fullStartDate = new Date(startTime + ' ' + fullIsoDate);
    var fullEndDate = new Date(endTime + ' ' + fullIsoDate);

    alert(fullStartDate);
    if (fullStartDate - fullEndDate > 0){
        alert("Start Time cannot be higher than End Time!");
    }
    alert(fullEndDate > fullStartDate)
});

Solution

  • date objects can be compared directly, and do not care about 12/24 hour format, so just put your times in two date objects and compare.

    var dateOne = new Date('1:00 PM 1/1/1900');
    var dateTwo = new Date('13:01 1/1/1900');
    
    if(dateOne < dateTwo)
    {
        alert('DateOne is before DateTwo');
    } else {
        alert('DateOne is after DateTwo');
    }
    

    You will get a alert box that says DateOne is before DateTwo