如何使用 javascript 或 jquery 比较两个时间选择器

Question

我正在使用 AdminLTE 的时间选择器，timeFrom 字段不得大于或等于 timeTo 字段，代码是这样的：

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

Answer 1

您可以使用 Date.parse() 来比较时间值 b/w 两次。

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)

演示版

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>

如果你想通过任何JS库实现那么你也可以使用momentjs

演示版

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>

如何使用 javascript 或 jquery 比较两个时间选择器

How to compare two time picker using javascript or jquery

javascript

php

jquery

adminlte