Проверка даты и времени jQuery - пользовательский интерфейс Timepicker - PullRequest
Новая
       21

Проверка даты и времени jQuery - пользовательский интерфейс Timepicker

3 голосов
/ 06 марта 2012

Я создаю плагин jQuery для создания субтитров на видео и использую библиотеку Пользовательский интерфейс Timepicker , чтобы определить начало и конец каждого начала и конца каждого субтитра.

Я использую тег input : 

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

И код javascript в формате ( чч: мм: сс ): 

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

Проблемы с проверкой:

  1. Есть ли способ просто разрешить вводу принять формат чч: мм: сс (только цифры в правильном диапазоне)?

  2. Есть ли способ сделать сравнение между двумя входами (что-то вроде if (12:21:12> 11:31:12) )?

Я очень ценю вашу помощь в решении этой проблемы проверки. Если есть другая библиотека jQuery, которая делает то, что я хочу, для меня не проблема перейти на другую библиотеку jQuery.

Ответы [ 2 ]

0 голосов
/ 15 мая 2014

Выбор времени по прошествии времени может быть полезен, так как он требует только 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);
    });
0 голосов
/ 16 февраля 2013

Вот скрипка для тестирования 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); 
    });
});

дополнительная дискуссия о сравнении этого формата времени Как сравнить две строки времени в формате ЧЧ: ММ: СС?

...