How to compare two time picker using javascript or jquery

I am using Time picker of AdminLTE, timeFrom field must not greater than or equal to timeTo Field, Code is something like this: enter image description here

var timeFrom = document.getElementById('timeFrom').value;
var timeTo = document.getElementById('timeTo').value;
if (timeFrom>= timeTo) {
    alert("Invalid time range");
} else {
    alert("Valid time range");
}

1 answer

  • answered 2018-07-11 06:51 Narendra Jadhav

    You could use Date.parse() to comparing time value b/w two times.

    The Date.parse() method parses a string representation of a date, and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC or NaN if the string is unrecognized or, in some cases, contains illegal date values (e.g. 2015-02-31)

    DEMO

    let getTime = (v) => {
        return Date.parse("11-7-2018 " + v)
    }
    
    $('.timepicker').timepicker({
        timeFormat: 'h:mm p',
        interval: 30,
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
    
    $('.submit').on('click', () => {
        let timeFrom = $('input[name=timeFrom]').val(),
            timeTo = $('input[name=timeTo]').val();
    
        if (!timeFrom || !timeTo) {
            alert('Select time');
            return
        }
    
        if (getTime(timeFrom) >= getTime(timeTo)) {
            alert('timeFrom field must not greater than or equal to timeTo Field');
        } else {
            alert('Time is valid')
        }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    
    <label>Time From</label>
    <input class="timepicker" name="timeFrom">
    
    <label>Time To</label>
    <input class="timepicker" name="timeTo">
    
    <br>
    
    <br>
    
    <button class="submit">Submit</button>


    If you want to achieve by any JS library so you can also use momentjs

    DEMO

    let getTime = (m) => {
        return m.minutes() + m.hours() * 60;
    }
    
    $('.timepicker').timepicker({
        timeFormat: 'h:mm p',
        interval: 30,
        dynamic: false,
        dropdown: true,
        scrollbar: true
    });
    
    $('.submit').on('click', () => {
        let timeFrom = $('input[name=timeFrom]').val(),
            timeTo = $('input[name=timeTo]').val();
    
        if (!timeFrom || !timeTo) {
            alert('Select time');
            return
        }
        timeFrom = moment(timeFrom, 'hh:mm a');
        timeTo = moment(timeTo, 'hh:mm a');
    
        if (getTime(timeFrom) >= getTime(timeTo)) {
            alert('timeFrom field must not greater than or equal to timeTo Field');
        } else {
            alert('Time is valid')
        }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
    
    <label>Time From</label>
    <input class="timepicker" name="timeFrom">
    
    <label>Time To</label>
    <input class="timepicker" name="timeTo">
    
    <br>
    
    <br>
    
    <button class="submit">Submit</button>