6

Here the code

$(document).ready(function() {
    $('#st').change(function(){
        var st = $('#st').val(); // start time Format: '9:00 PM'
        var et = $('#et').val(); // end time   Format: '11:00 AM' 

        //how do i compare time
            if(st > et)
            {
               alert('end time always greater then start time');
            }
    });
});

if i have time range as follows

Start Time Range (listbox) =   12:00 AM To 11:59PM

End Time Range  (listbox)  =   12:00 AM To 11:59PM

then how to validate start-time less then end-time OR end-time greater then start-time

Start-time < End-time  OR  End-time > St-time

consider time format in js-code, due to time-format am unable to implement difference logic

Format: '9:00 AM'
Format: '5:00 PM'
Frank
  • 2,285
  • 7
  • 43
  • 68

5 Answers5

26

Here i got after investigate this.
The best practice if Time Format in 12 Hour-Time Or 24 Hour-Time.

//start time
var start_time = $("#start_time").val();

//end time
var end_time = $("#end_time").val();

//convert both time into timestamp
var stt = new Date("November 13, 2013 " + start_time);
stt = stt.getTime();

var endt = new Date("November 13, 2013 " + end_time);
endt = endt.getTime();

//by this you can see time stamp value in console via firebug
console.log("Time1: "+ stt + " Time2: " + endt);

if(stt > endt) {
    $("#start_time").after('<span class="error"><br>Start-time must be smaller then End-time.</span>');
    $("#end_time").after('<span class="error"><br>End-time must be bigger then Start-time.</span>');
        return false;
}
Frank
  • 2,285
  • 7
  • 43
  • 68
4

You have to convert strings to values you can compare in terms of time. Date.parse comes in handy, though you're required to pass a date as well. Since you only care about time, use the same fake date for both.

if(Date.parse("1-1-2000 " + st) > Date.parse("1-1-2000 " + et)) {
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • Failed On `3:00 AM to 2:30 PM` coz 300 is greater then 230 – Frank Jun 28 '12 at 13:45
  • @Frank: Please consider toggling the tick next to the answer that helped you. – pimvdb Jun 28 '12 at 17:38
  • But its fails on these condition: `[1] if StartTime 1:00 AM and EndTime 12:00AM/12:30AM` Other condition `[2] if StartTime 1:00 AM and EndTime 12:00PM/12:30PM` – Frank Jun 29 '12 at 06:35
  • Use firebug then console it in jquery and check console output: `console.log(Date.parse("1-1-2000 " + st) + " " + Date.parse("1-1-2000 " + et));` In 2nd condition, EndTime(et) object return `null` in console. – Frank Jun 29 '12 at 06:38
  • One More Condition Fails: `[3] if StartTime 11:00 PM and EndTime 12:00 PM/12:30 PM` 11PM(night) and 12PM/12:30PM(noon) – Frank Jun 29 '12 at 07:03
3

You can even try the following jquery rule : jQuery.validator.addMethod

   jQuery.validator.addMethod("timeValidator",
   function (value, element, params) {
   var val = new Date('1/1/1991' + ' ' + value);       
   var par = new Date('1/1/1991' + ' ' + $(params).val());
   if (!/Invalid|NaN/.test(new Date(val))) {
           return new Date(val) > new Date(par);
       }

       return isNaN(val) && isNaN(par)
           || (Number(val) > Number(par));
}, 'End Time must be greater than Start Time.');

You can call the rule :

$("#txtToTime").rules('add', { timeValidator: "#txtFromTime" });
Shruti Sehgal
  • 91
  • 4
1

If they are select elements and the order in the select elements is the same, compare the selectedIndex. No need to parse dates.

epascarello
  • 204,599
  • 20
  • 195
  • 236
0

Turn them into Date objects:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date

Then use the usual comparators:

Compare two dates with JavaScript

Community
  • 1
  • 1
SpacedMonkey
  • 2,725
  • 1
  • 16
  • 17