Поле ввода даты ввода с onsubmit

Question

Я искал везде, но не смог найти хороший код для своей проблемы. У меня есть поля ввода, которые пользователи используют для отправки онлайн-запросов. И одно из полей - это поле даты, которое я хотел бы как-то проверить таким образом, чтобы это разрешалось, только если введенная дата была где-то между сегодняшним днем ​​и 8 днями ранее. Пример: если сегодня 29 ноября, им будет разрешено вводить только дату с 21 по 29 ноября и ничего больше И будет отображаться окно предупреждения уже, когда они ввели неправильную дату. Они заберут дни из мини-справочника но эта часть решена, мне нужна помощь только с проверкой. Если бы кто-нибудь мог опубликовать рабочий код, я был бы очень благодарен. Спасибо

Answer 1

Использование JQuery UI DatePicker, скрипт ниже:

$(function() { 
    var currentDate = new Date(); 
    var maxAllowedDate = new Date(currentDate); 
    maxAllowedDate.setDate(currentDate.getDate() + 8); 
    $("#datepicker").datepicker({ 
     changeYear: true, 
     minDate: '0', 
     maxDate: '+7D', 
    }); 
    $('#datepicker').change(function(){ 
    var enteredVal = new Date(this.value); 
     if(enteredVal.getTime() < currentDate.getTime() || enteredVal.getTime() > maxAllowedDate.getTime()) { 
      alert("invalid"); 
     } else { 
      alert("valid"); 
     } 
    }); 
}); 

и пользовательский интерфейс:

<div class="demo"> 

<p>Date: <input type="text" id="datepicker"></p> 

Вот jsFiddle демо: http://jsfiddle.net/pjkz7k0t/1/

Answer 2

Поскольку вы просили JavaScript , Я предполагаю, что вам нужен ответ javascript, а не ответ jQuery.

function isValidDate(checkDate) { 
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) { 
     // split checkDate into three pieces 
     var strMM = checkDate.split('/')[0]; 
     var strDD = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

     // create new Date() object from split pieces 
     var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

     // evaluate each piece of resulting date object against each corresponding piece of checkDate 
     if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) { 
      /* if you wish, add additional validation constraints here */ 
      return true; // all three pieces match exactly 
     } 
    } 
    return false; // did not meet criteria for return true 
} 

Этот метод использует явное регулярное выражение для проверки форматов.

Вместо того чтобы создавать сложные методы тестирования каждой части, я использовал кусочки для создания нового объекта Date(), зная, что результат MIGHT не соответствует checkDate и использует кусочки из итоговой даты для проверки частей checkDate, переданных в функция. Если ВСЕ ТРЕХ штук совпадают, введенная дата действительна.

Например:

'02/29/2014' возвращает ложь

'02/29/2012' возвращает истину

'12/36/2014' возвращает ложное

'29/06/2014 'возвращает false

Код - это чистый javascript, который улучшает переносимость, и этот метод не мешает или не мешает дополнительной проверке любыми другими критериями yo u выберите использование (против диапазонов года или оценки strCheckDate против today() или любых других ограничений, специфичных для вашего конкретного приложения).

Дополнительным преимуществом является то, что этот метод не просто определяет, может ли то, что передается функции, создать достоверную дату, но подтверждает, что введенная дата СЧИТАЕТ действительную дату, которая может быть создана (тем самым преодолевая проблему javascript «дополнительные дни» вперед по дате создания).

Это можно легко расширить, чтобы проверить различные конфигурации даты, используя ту же логику, просто создав другой тест регулярного выражения и по-разному разделив checkDate.

регулярное выражение для DD/MM/YYYY будет то же самое, но раскол будет выглядеть следующим образом:

 // split characters into three pieces 
     var strDD = checkDate.split('/')[0]; 
     var strMM = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

Или YYYY/MM/DD вы бы использовать регулярное выражение:

 /\d\d\d\d\/\d\d\/\d\d/.test(checkDate) 

и раскол будет выглядеть следующим образом:

 // split characters into three pieces 
     var strYYYY = checkDate.split('/')[0]; 
     var strMM = checkDate.split('/')[1]; 
     var strDD = checkDate.split('/')[2]; 

Это очень трансформируемые (и чистый) Javascript код для достижения цели Вали датировка введенной пользователем даты и может быть быстро изменена, чтобы расширить проверки на допустимую дату в пределах диапазона.

function isValidDateRange(checkDate,minDate,maxDate) { 
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) { 
     // split checkDate into three pieces 
     var strMM = checkDate.split('/')[0]; 
     var strDD = checkDate.split('/')[1]; 
     var strYYYY = checkDate.split('/')[2]; 

     // create new Date() object from split pieces 
     var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

     // evaluate each piece of resulting date object against each corresponding piece of checkDate 
     if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) { 
      // if this code fires, you have a valid date entered, first logic hurdle passed 
      // If you pass in minDate and maxDate as any format other than a date object, you should 
      // create new Date(); from them before comparing. 
      // Example: 
      // var strMinMM = minDate.split('/')[0]; 
      // var strMinDD = minDate.split('/')[1]; 
      // var strMinYYYY = minDate.split('/')[2]; 
      // minDate = new Date(strMinYYYY,(strMinMM - 1),strMinDD); 
      // var strMaxMM = maxDate.split('/')[0]; 
      // var strMaxDD = maxDate.split('/')[1]; 
      // var strMaxYYYY = maxDate.split('/')[2]; 
      // maxDate = new Date(strMaxYYYY,(strMaxMM - 1),strMaxDD); 
      if((!strDateCheck < minDate) && (!strDateCheck > maxDate)) { 
       return true; // all three pieces match exactly AND date is within specified range 
      } 
     } 
    } 
    return false; // did not meet criteria for return true 
}