Ручная проверка ввода даты для jQuery UI Datepicker maxDate option

Question

У меня есть jQuery datepicker на странице, которая должна позволять вводить дату вручную, но также необходимо проверить, что дата не более чем на один день вперед. Элемент управления выбора был ограничен с помощью maxDate, но когда один вводит вручную дату, они могут ввести дату более чем на один день вперед. Как один (я) прекратил это? Вот то, что я до сих пор:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({ 
    showOn: "button", 
    maxDate: "+1", 
    showOtherMonths: true 
}); 

Answer 1

Ну, выше ответ правильный, но он не проверяет форму, пользователь все равно сможет отправить форму,

Я провел несколько исследований, но не смог найти ny, и, наконец, я написал эту функцию, которая отлично работает и проверяет форму, и не позволяет отправлять форму до тех пор, пока не будет введена правильная дата. Надеюсь, это поможет!

Единственное, что вам нужно сделать, это добавить этот код, а затем он будет применяться ко всем полям с классом datePicker.

$(".datePicker").datepicker({ 
      dateFormat: 'd/mm/yy', 
      changeMonth: true, 
      changeYear: true, 
      firstDay: 1, 
      minDate: Date.parse("1900-01-01"), 
      maxDate: Date.parse("2100-01-01"), 
      yearRange: "c-90:c+150" 
     }); 

     // validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql 
     $(function() { 
      $.validator.addMethod(
       "date", 
       function (value, element) { 

        var minDate = Date.parse("1900-01-01"); 
        var maxDate = Date.parse("2100-01-01"); 
        var valueEntered = Date.parse(value); 

        if (valueEntered < minDate || valueEntered > maxDate) { 
         return false; 
        } 
        return !/Invalid|NaN/.test(new Date(minDate)); 
       }, 
       "Please enter a valid date!" 
      ); 
     }); 

Answer 2

Я не уверен, что если DatePicker срабатывает событие, если значение элемента управления изменяется путем ввода непосредственно. Вы можете привязать функцию к .change() события:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({ 
    dateFormat: "mm-dd-yy",     // since you have defined a mask 
    maxDate: "+1", 
    showOn: "button", 
    showOtherMonths: true 

}).on("change", function(e) { 
    var curDate = $(this).datepicker("getDate"); 
    var maxDate = new Date(); 
    maxDate.setDate(maxDate.getDate() + 1); // add one day 
    maxDate.setHours(0, 0, 0, 0);   // clear time portion for correct results 
    if (curDate > maxDate) { 
     alert("Invalid date"); 
     $(this).datepicker("setDate", maxDate); 
    } 
}); 

Demo here

Answer 3

Одним из вариантов является удаление возможность вручную ввести дату, сделав поля ввода readonly. Это позволит пользователю вручную ввести что-нибудь сумасшедшее и принудительно использовать датпикер.

Answer 4

У меня был точно таким же требование и здесь это решение, которое работает для меня как шарм:

$(".datepicker").attr("placeholder", "mm-dd-yyyy").change(function(){ 
    $(this).datepicker('setDate', $(this).datepicker('getDate')); 
    }).datepicker({ 
     showOn: "button", 
     maxDate: "+1", 
     showOtherMonths: true 
    }); 

Модифицированного скрипку here ссылки из Салманых элементов а answer