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

回答

相關問題