新的Date（）12/24小时格式的JavaScript？

Question

I have a simple validation that should prevent Time In/Out of entering incorrect values. So if user pick for example:

12:30 PM = Time In and 12:15 PM = Time Out

They will get the message on the screen 'Time Out can not be less or equal than Time In' .

My validation works fine but in one case. For example user pick:

Time In: 12:30 PM and Time Out: 1:00 PM

They click save and alert message popup. I found that my code was producing something like this:

Time In: Thu Sep 15 2016 00:29:00 GMT-0500 (Central Standard Time)Time Out: Wed Sep 14 2016 13:29:00 GMT-0500 (Central Standard Time)

I used JavaScript to create new Date for Time In and Time out values. Looks like my code is setting 00 for 12 PM hours in new Date() . So my question is how to prevent that or is there any other way in JavaScript to fix this problem. Here is my code where I'm taking two entered values in converting to new Date() :

var timeIn = document.getElementById('timeIn').value;
var timeOut = document.getElementById('timeOut').value;
var today = new Date(),
  curYear = today.getFullYear(),
  curDate = today.getDate(),
  curMonth = today.getMonth(),

  defaultTimeIn = timeIn.split(":"),
  defaultTimeOut = timeOut.split(":"),

  defaultHourIn = parseInt(defaultTimeIn[0], 10),
  defaultHourOut = parseInt(defaultTimeOut[0], 10),

  defaultMinAMPMIn = defaultTimeIn[1].split(" "),
  defaultMinAMPMOut = defaultTimeOut[1].split(" "),

  defaultMinIn = defaultMinAMPMIn[0],
  defaultMinOut = defaultMinAMPMOut[0],

  defaultAMPMIn = defaultMinAMPMIn[1],
  defaultAMPMOut = defaultMinAMPMOut[1];

if (defaultAMPMIn == "PM") {
  defaultHourIn += 12; //hours are in 24-hour format (0-23)
}

if (defaultAMPMOut == "PM") {
  defaultHourOut += 12; //hours are in 24-hour format (0-23)
}

var compTimeIn = new Date(curYear, curMonth, curDate, defaultHourIn, defaultMinIn);
var compTimeOut = new Date(curYear, curMonth, curDate, defaultHourOut, defaultMinOut);

if (compTimeIn >= compTimeOut) {
  alert("'Time Out' can't be less or equal to 'Time In'");
}

Answer 1

12-hour clock to 24-hour clock, hour + period conversion.

 function to24Hour(hour, period) { if (period === 'AM' && hour === 12) { hour -= 12; } else if (period === 'PM' && hour < 12) { hour += 12; } return hour; } const hours12 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; const hours24 = []; for (let hour of hours12) { hours24.push(to24Hour(hour, 'AM')); hours24.push(to24Hour(hour, 'PM')); } console.log(hours24); 

Answer 2

Just change your condition from:

defaultAMPMOut/In == "PM"

to

defaultAMPMOut/In == "PM" && defaultHourOut/In != 11 //or 12 depending on if it starts at 0 or 1

What's happening is if it's 12, then it's still adding 12 when it shouldn't be, rolling it over to 0.

EDIT:

If it's 12AM, you also have to subtract 12 hours so it's 0

if (defaultAMPMIn == "PM" && defaultHourIn != 12) {
  defaultHourIn += 12; //hours are in 24-hour format (0-23)
}

if (defaultAMPMOut == "PM" && defaultHourOut != 12) {
  defaultHourOut += 12; //hours are in 24-hour format (0-23)
}

if (defaultAMPMOut == "AM" && defaultHourOut == 12) {
  defaultHourOut -= 12; //hours are in 24-hour format (0-23)
}

if (defaultAMPMIn == "AM" && defaultHourIn == 12) {
  defaultHourIn -= 12; //hours are in 24-hour format (0-23)
}

Answer 3

Why not do something simpler and convert this into a re-usable function, something like:

var time = document.getElementById('timeIn').value;
var hours = Number(time.match(/^(\d+)/)[1]);
var minutes = Number(time.match(/:(\d+)/)[1]);
var AMPM = time.match(/\s(.*)$/)[1];
if(AMPM == "PM" && hours<12) hours = hours+12;
if(AMPM == "AM" && hours==12) hours = hours-12;
var sHours = hours.toString();
var sMinutes = minutes.toString();
if(hours<10) sHours = "0" + sHours;
if(minutes<10) sMinutes = "0" + sMinutes;
alert(sHours + ":" + sMinutes);

Answer 4

Try this.

  // Your Code
    if (defaultAMPMIn == "PM" && defaultHourIn >12) {
                defaultHourIn += 12;//hours are in 24-hour format (0-23)
            }

            if (defaultAMPMOut == "PM" && defaultHourOut >12) {
                defaultHourOut += 12;//hours are in 24-hour format (0-23)
            }
   //Your Code