jQuery日期时间选择器验证 - 时间选择器UI

Question

我正在开发一个jQuery插件，用于在视频上创建字幕，并使用库Timepicker UI来定义每个字幕的开始和结束时间。

我正在使用一个input标签：

<input class="HoursStart hasDatepicker valid" type="text"
 value="0" name="HoursStart">

以下是使用格式 (hh:mm:ss) 的 javascript 代码：

$('.HoursStart ').timepicker(
{
    showSecond: true,
    timeFormat: 'hh:mm:ss'
});

问题出在验证方面：

1. 有没有一种方法只允许输入格式为hh:mm:ss（正确范围内的数字）？

2. 有没有一种方法可以比较两个输入（类似于if (12:21:12 > 11:31:12)）？

我非常感谢您解决这些验证问题的帮助。如果有其他jQuery库可以实现我的需求，那么更换到其他jQuery库对我来说不是问题。

- Tito

---

有人已经找到了这个问题的解决方案吗？我也需要这个验证！ :/ - Rafael Moni

Answer 1

这里有一个fiddle用于测试正则表达式并比较时间字符串：

$(function () {
   var timeRegex = new RegExp('([0-9]{2}):([0-9]{2}):([0-9]{2})');
    var originalTime = "00:10:20";

    $('#submit').click(function(){
       var time = $.trim($('#time').val());
       var isTime = timeRegex.test(time);
       var greater = time > originalTime;
        var testString = "Is correct format: "+isTime +", is greater:" + greater;
       window.alert(testString); 
    });
});

更多关于比较时间格式的讨论 如何比较两个格式为HH:MM:SS的时间字符串？

- BillPull

Answer 2

以下时间选择器可能非常有用，因为它只需要jquery而不需要包含任何库。 http://jsfiddle.net/W4wwv/3/

HTML：

    <span class="timepicker">
    <input type="text" name="hh" class="hh" maxlength="2" size="2" placeholder="HH">:
    <input type="text" name="mm" class="mm" maxlength="2" size="2" placeholder="MM">:
    <input type="text" name="ss" class="ss" maxlength="2" size="2" placeholder="SS">
    </span>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>

CSS：

    .timepicker{
    border:1px solid #c0c0c0;
    display:block;
    height:23px;
    width:98px;
    }
    .timepicker input{
    width:25px;
    border:0px;
    margin-bottom:1px !important;
    maxlength:2
    }

JS：

    var validateNumber = function(n, min, max){

            if(n > max)return max;
            else if(n < min)return min;
            return n;
    };

    var validateAfterChange = function(n , min){

            var numReg = /^[0-9]{1,2}$/;

            if(!numReg.test(n))                     
            return "00";
            if(n.length <= 1) return "0"+n;
            return n;
    }

    $(".hh")
    .on("keyup", function(){
        var v = validateNumber($(this).val(), 0, 23);
    $(this).val(v);
    $("#h").html($(this).val());
    })
    .on("change", function(){
            var v = validateAfterChange($(this).val(), 0);
            $(this).val(v);
    });


    $(".mm")
    .on("keyup", function(){
            var v = validateNumber($(this).val(), 0, 60);
            $(this).val(v);
            $("#m").html($(this).val());
    }).on("change", function(){
        var v = validateAfterChange($(this).val(), 0);
            $(this).val(v);
    });

    $(".ss")
.on("keyup", function(){
        var v = validateNumber($(this).val(), 0, 60);
    $(this).val(v);
    $("#m").html($(this).val());
}).on("change", function(){
        var v = validateAfterChange($(this).val(), 0);
    $(this).val(v);
    });

- Kashyap