DatePicker Validation JQuery Как проверить

Question

У меня есть один Datepicker, и из-за того, что пользователи могут писать недопустимые символы в текстовое поле, я хочу иметь проверку даты.

Вот моя форма:

@using (Html.BeginForm("Action", "Controller", FormMethod.Post)) 
{ 

@Html.TextBox("txtDate", txtDate, "{0:dd.MM.yyyy}", new { @class = "date", id = "txtDate" }) 
<input type="submit" id="btnSubmit" value="Getir" /> 

} 

Первый вопрос: Мой приходит как «дд.мм.гггг», но в этом сценарии кода речь идет, как «мм/дд/гггг». Как я могу отформатировать этот код сценария наподобие «dd.MM.yyyy»?

Второй вопрос: Если моя проверка даты неверна, как я могу отключить кнопку, чтобы отправить?

Вот код сценария и its link.

$(function() { 
    $('#btnSubmit').bind('click', function(){ 
     var txtVal = $('#txtDate').val(); 
     if(isDate(txtVal)) 
      alert('Valid Date'); 
     else 
      alert('Invalid Date'); 
    }); 

function isDate(txtDate) 
{ 
    var currVal = txtDate; 
    if(currVal == '') 
     return false; 

    var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex 
    var dtArray = currVal.match(rxDatePattern); // is format OK? 

    if (dtArray == null) 
     return false; 

    //Checks for mm/dd/yyyy format. 
    dtMonth = dtArray[1]; 
    dtDay= dtArray[3]; 
    dtYear = dtArray[5];   

    if (dtMonth < 1 || dtMonth > 12) 
     return false; 
    else if (dtDay < 1 || dtDay> 31) 
     return false; 
    else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31) 
     return false; 
    else if (dtMonth == 2) 
    { 
     var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0)); 
     if (dtDay> 29 || (dtDay ==29 && !isleap)) 
       return false; 
    } 
    return true; 
} 

}); 

Answer 1

Для вашего первого вопроса. Изменение rxDatePattern переменной в скрипте:

var rxDatePattern = /^(\d{1,2})(\.|-)(\d{1,2})(\.|-)(\d{4})$/; //Declare Regex 

Обратите внимание, как я заменил слэш с точками.

Тогда я бы порекомендовал вам отключить кнопку по умолчанию и включить ее, когда действительная дата указана в поле ввода поля даты. Поэтому я хотел бы изменить функцию $('#btnSubmit').bind('click') на:

$('#txtDate').on('keyup', function(){ 
    var txtVal = $('#txtDate').val(); 
    if(isDate(txtVal)) 
     $('#btnSubmit').prop('disabled', false); 
    else 
     $('#btnSubmit').prop('disabled', true); 
}); 

See jsFiddle

EDIT:

Мой плохо, я не понял. Подумал как-то вы просите формат mm.dd.yyyy.

Но я внесла некоторые изменения в свой первоначальный код. С тем же HTML я изменил JQuery немного:

function isDate(txtDate) 
{ 
    //Here comes one ugly, long and working regexp 
    var rxDatePattern = /^(((0?[1-9]|[12]\d|3[01])\.(0?[13578]|1[02])\.((19|[2-9]\d)\d{2}))|((0?[1-9]|[12]\d|30)\.(0?[13456789]|1[012])\.((19|[2-9]\d)\d{2}))|((0?[1-9]|1\d|2[0-8])\.0?2\.((19|[2-9]\d)\d{2}))|(29\.0?2\.((1[6-9]|[2-9]\d)(0?[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g; 

    return txtDate.match(rxDatePattern); //Returns true iff. currval is a valid date 
}; 
function validate_datePicker(){ 
    var txtVal = $('#txtDate').val(); 
    if(isDate(txtVal)) 
     $('#btnSubmit').prop('disabled', false);   
    else 
     $('#btnSubmit').prop('disabled', true); 
}; 
$(document).ready(function() { 
    $('#txtDate').on('keyup', function(){ 
     validate_datePicker(); 
    }); 
    validate_datePicker(); 
}); 

Checkout нового jsFiddle

Регулярное выражение оценивает кастрированный баран данной строки даты является датой или нет. Обратите внимание, что срок действия 08.08.2014 и 8.8.2014 действителен. (Это ноль перед датой и месяцем являются необязательными)