Xác thực mục nhập ngày thủ công cho tùy chọn jQuery UI Datepicker maxDate

Question

Tôi có thanh công cụ của jQuery trên trang cần cho phép nhập ngày thủ công, nhưng cũng cần phải xác thực rằng ngày đó không quá một ngày. Kiểm soát bộ chọn đã bị giới hạn thông qua maxDate, nhưng khi người dùng nhập ngày theo cách thủ công, họ có thể nhập ngày trước hơn một ngày. Làm thế nào một (tôi) ngăn chặn điều đó? Dưới đây là những gì tôi có cho đến thời điểm này:

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

Answer 1

Vâng, câu trả lời trên là chính xác, nhưng nó không xác nhận các hình thức, người dùng vẫn sẽ có thể gửi biểu mẫu,

Tôi đã thực hiện một số nghiên cứu, nhưng không thể tìm thấy ny, cuối cùng tôi đã viết chức năng này hoạt động tốt và xác thực biểu mẫu và không gửi biểu mẫu cho đến ngày chính xác được nhập, Hy vọng nó sẽ giúp!

Điều duy nhất bạn cần làm là thêm mã này và sau đó điều này sẽ được áp dụng cho tất cả các trường có lớp '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

Tôi không chắc chắn nếu datepicker kích hoạt sự kiện nếu giá trị của điều khiển bị thay đổi bằng cách nhập trực tiếp. Bạn có thể ràng buộc một chức năng để sự kiện .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

Một tùy chọn là xóa khả năng nhập thủ công ngày bằng cách nhập các trường nhập readonly. Điều này sẽ hạn chế người dùng nhập thủ công bất cứ điều gì điên rồ, và buộc sử dụng datepicker.

Answer 4

tôi đã chính xác các yêu cầu tương tự và đây là giải pháp mà làm việc cho tôi như một say mê:

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

Modified fiddle here tham chiếu từ Salman Một của answer