javascript - 如何使用 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");
}

标签： javascriptphpjqueryadminlte

Answer 1

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

Date.parse ()方法解析日期的字符串表示形式，并返回自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数，如果字符串无法识别或在某些情况下包含非法日期值，则返回 NaN （例如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>