Search code examples
javascriptphpjqueryadminlte

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");
}
Solution

  • 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>