jQuery datetimepicker验证 - Timepicker UI

我正在构建一个jQuery插件来创建视频上的字幕，并且我使用库Timepicker UI来定义开始和结束，即每个字幕的开始和结束。jQuery datetimepicker验证 - Timepicker UI

我正在使用输入标签：

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

而使用格式的的javascript代码（为hh：mm：ss的）：

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

的问题是用验证：

有没有办法让输入接受格式 hh：mm：ss（只是数字在正确的范围内）？
有没有一种方法，使两个输入端之间的比较（像 如果（12点21分12秒> 11点31分十二秒））？

我真的很感谢您的帮助来解决这个验证问题。如果有另一个jQuery库产生我想要的内容，那么对于我转换到其他jQuery库不是一个问题。

来源

2012-03-06 Tito

是否有人已经发现这个问题的任何解决方案？我也需要这个验证！：/ – 2013-02-06 17:53:17

这里是一个fiddle用于测试regex和比较的时候串：

$(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); 
    }); 
});

上比较那段时间格式 How can I compare two time strings in the format HH:MM:SS?

来源

2013-02-15 20:34:11 BillPull

随着时间选择可能是有用的更多讨论，因为它仅需要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); 
    });

来源

2014-05-15 10:58:43 Kashyap

jQuery datetimepicker验证 - Timepicker UI

回答

相关问题