如何使用jQueryUI日期选择器和HTML5时间输入比较日期/时间值?

时间:2013-08-12 16:41:06

标签: jquery html5 jquery-ui jquery-ui-datepicker html-input

我想验证“开始”日期/时间对早于页面上的“结束”日期/时间对。我正在使用jQueryUI datepicker和HTML5时间输入元素/小部件。

这个jQuery:

    var begD = $.datepicker.parseDate('mm/dd/yy', $('#BeginDate').val());
    var endD = $.datepicker.parseDate('mm/dd/yy', $('#EndDate').val());
    if (begD > endD) {
            alert('Begin date must be before End date');
            $('#BeginDate').focus();
            return false;
    }    

(请参阅此上下文中的脚本:http://jsfiddle.net/clayshannon/QCrXG/9/

...用于比较datepicker vals,但我也需要合并时间元素,以便在“End”时间元素中比“Begin”时间元素更早的时间(在同一天)也会将范围标记为无效。

怎么做?

1 个答案:

答案 0 :(得分:2)

这是一种方法。您需要测试以查看日期是否相同,然后在其中,将时间附加到您可以比较的新日期对象。 (可能有更快的方法来执行此操作,但这可用于测试,在此处:http://jsfiddle.net/mori57/SEqVE/):

} else if(begD.toString() == endD.toString() ){
    var dteString = begD.getFullYear() + "/" + (begD.getMonth()+1) + "/" + begD.getDate();
    var begT = new Date(dteString + " " + $('#BeginTime').val());
    var endT = new Date(dteString + " " + $('#EndTime').val());

    if( begT > endT ){
        alert('Begin date must be before End date');
        $('#BeginTime').focus();
        return false;
    }
}