Comparing Start Time and End Time

I know there are many questions asked about this topic here but no one is about the problem I have.

This script is for reservations where the user selects the date and the start and end time and makes a reservation. I have a form with a date selector input field and two time selector input fields, one for the start time and one for the end time.

The problem is that the store which I'm writing the reservation script for is opened from 17:00 evening to 01:00 morning. So if someone is reserving from 23:00 to 01:00 the start time is always shown as bigger, which results in that the form is not validated.

Does anyone know if there is a solution to this or if there is a validator out there which can do this.

NOTE: I only want to compare the times and I don't want to add another date field.

var timeto=$('#timeto').val();
var timefrom=$('#timefrom').val();
        if(timefrom>timeto){
            alert('start time should be smaller')
        }

So if time from is 23:00 and time to is 00:00 than the alert is shown,but in reality 00:00 is a greater time than 23:00

9

4 Answers

Just subtract one hour while creating object of date.

var timefrom = new Date();
temp = $('#timefrom').val().split(":");
timefrom.setHours((parseInt(temp[0]) - 1 + 24) % 24);
timefrom.setMinutes(parseInt(temp[1]));

var timeto = new Date();
temp = $('#timeto').val().split(":");
timeto.setHours((parseInt(temp[0]) - 1 + 24) % 24);
timeto.setMinutes(parseInt(temp[1]));

if (timeto < timefrom){
    alert('start time should be smaller than end time!');
}
3
// get the times as strings   
start_string = $('#timefrom').val();    
end_string = $('#timeto').val();

// define an arbitrary start time since you are only comparing hours
start_time = new Date("May 26, 2016 " + start_string);

// define the end time as the same date + end time
end_time = new Date("May 26, 2016 " + end_string);


// now we need to check if your end time is beyond midnight, if so, we need to add one day to end_time
var stay_length = end_time.getTime() - start_time.getTime();
if (stay_length < 0 {
    // end time is beyond midnight, re-calculate end_time with adding one to the day
    end_time = new Date("May 27, 2016 " + end_string);
    stay_length = end_time.getTime() - start_time.getTime();
} elseif (stay_length > 24 {
    // The user probably reversed the times, so show an alert
    alert("The start time must be before the end time")
} else {
    // The user most likely put in correct times
}
1

As your times are stored as a string, you can try parsing them to a Date and compare them;

var timeto=$('#timeto').val();
var timefrom=$('#timefrom').val();
     if(Date.parse(timefrom) > Date.parse(timeto) > true){
         alert('start time should be smaller')
     }

I think you should make the time as DateTime to compare easier. Please try this:

var end_time=$('#timeto').val();
var start_time =$('#timefrom').val();

var stt = new Date("May 26, 2016 " + start_time);
stt = stt.getTime();

var endt= new Date("May 26, 2016 " + end_time);
endt = endt.getTime();
if(stt >endt){
   //do something
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Robert Thorne

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article
Twitter Facebook Pinterest