Плагин маскированного ввода с датой ограничения

Question

Я использую маскированный ввод для текстового поля ввода для даты в формате MM / YYYY.(http://digitalbush.com/projects/masked-input-plugin/)

Мой код JavaScript:

jQuery(function($){
   $(".date").mask("12/2099");
});

И HTML-код:

<input type="text" class="date">

Когда я начинаю что-то писать, требуетсявведите значение 12/2099, и невозможно написать что-то другое.

Если в маске javascript я пишу 99/9999, пользователи могут написать дату, которая является ложной ... поэтому я не делаю то, что должен сделать?

Я хочу, чтобы пользователи могли писать, начиная с 01/1990 до 12/2099, возможно добавление к ограничению значением даты + 20 лет или что-то в этом роде ...

Answer 1

Могу предложить дополнительное решение.Я немного изменил решение Оскара.Я использовал плагин для маскирования Джоша Буша.Этот плагин был разработан ТОЛЬКО для ввода пользовательского ввода без какой-либо проверки.Я объединил ведение с проверкой.Вот мой код:

<script src="@Links.Scripts.MaskedInput_js"></script>
<script>
$.mask.definitions['y'] = '[12]';
$.mask.definitions['m'] = '[01]';
$.mask.definitions['d'] = '[0-3]';
$("#BirthDay").mask("d9/m9/y999", { placeholder: " " });

$("#BirthDay").keyup(function () {
    var datevalue = $(this).val();
    if (datevalue.trim().length == 10) {
        verifyDate(datevalue);
    }
})

function verifyDate(datevalue) {
    var done = false;
    if (datevalue != null || datevalue != '') {
        var tmp = datevalue.split('/');
        var day = tmp[0];
        var month = tmp[1];
        var year = tmp[2];
        var fromYear = 1900;
        var now = new Date();

        if (day >= 1 && day <= 31) {
            if (month >= 1 && month <= 12) {
                if (year >= fromYear && year <= now.getFullYear()) {
                    clean();
                    done = true;
                } else {
                    $('#msg').html('Year must be between' + " " + fromYear + " - " + now.getFullYear());
                }
            } else {
                $('#msg').html('Month is invalid');
            }
        } else {
            $('#msg').html('Day is invalid');
        }
    }
    return done;
}

function clean() {
    $('#msg').html('');
}
</script>

Конечно, это не полная проверка даты на стороне клиента (здесь нет возможности проверить такую ​​дату, как, например, 30.02.2013).Я должен использовать для проверки даты на стороне сервера.

Но, тем не менее, это решение минимизирует ошибки клиента.

Answer 2

Ну, я думаю, хорошо иметь замаскированный вход, но я предпочитаю проверять входное значение, потому что такие плагины обычно работают с регулярным выражением изнутри.

Мое решение для этого может быть:

(отредактировано и проверено)

Добавление div для сообщения

<form id="frm">
    <input type="text" class="date">
    <div id="msg"></div>
    <input type="submit" value="Click Me"/>
</form>

JS:

     <script type="text/javascript">

            function verifyDate(datevalue) {

              var done = false;

              if(datevalue != null || datevalue != ''){

                //split the date as a tmp var
                var tmp = datevalue.split('/');

                //get the month and year
                var month = tmp[0];
                var year = tmp[1];

               if(month >= 1 && month <= 12){
                  if(year >= 1990 && year <= 2099){

                   //clean the message
                   clean();

                   //finally, allow the user to pass the submit
                   done = true;

                  } else {
                    $('#msg').html('Year must be from 1990 - 2099.');
                  }
               } else {
                  $('#msg').html('Month is invalid.');
               }
            }
            return done;
          }

          function clean() {
             $('#msg').html('');
          }

          jQuery(function($) {

             //mask the input
             $(".date").mask("12/2099");

             $('#frm').submit(function() {
                var datevalue = $('.date').val();
                return verifyDate(datevalue)           
             });

             $(".date").keyup(function(){
                //get the date
                var datevalue = $(this).val();

                //only if the date is full like this: 'xx/xxxx' continue
                if(datevalue.length == 7) {               
                  verifyDate(datevalue);
                } else {
                  clean();
                }
             });

          });

    </script>

Надеюсь, это поможет.

Привет.