jQuery UI için manuel tarih girişi doğrulaması Datepicker maxDate seçeneği

Question

Tarihin manuel olarak girilmesine izin vermesi gereken bir sayfada jQuery datepicker var, ancak aynı zamanda tarihin bir günden fazla olmadığını doğrulamak gerekiyor. Seçici kontrolü maxDate ile sınırlandırıldı, ancak tarih manuel olarak girdiğinde, bir günden fazla bir tarih girebilir. Biri bunu nasıl durdurur?

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

Answer 1

Eh, yukarıdaki cevabı doğru, ancak, kullanıcı yine formu göndermek mümkün olacak o formu doğrulamaz,

Bazı araştırmalar yaptım, ancak ny'yi bulamadım, nihayetinde bu işlevi iyi yazıp formu doğruladım ve doğru tarih girilene kadar formu göndermeye izin vermedim, umarım yardımcı olur!

Yapmanız gereken tek şey bu kodu eklemek ve daha sonra 'datePicker' sınıfıyla tüm alanlara uygulanacaktır.

$(".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

Ben denetimin değeri doğrudan yazarak değiştirilirse datepicker bir etkinliği tetikleyen emin değilim: İşte ben bugüne kadar ne var. Sen .change() olaya bir işlevi bağlayabilir:

$(".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

Seçeneklerden biri elle giriş alanlarını readonly yaparak tarih girmek için yetenek kaldırmaktır. Bu, kullanıcının elle deli bir şey girmesini kısıtlar ve tarihçinin kullanımını zorlar.

Answer 4

ben de aynı gereksinimi vardı ve burada bir cazibe gibi benim için çalıştı çözüm:

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

Modifiye keman here Salman A'lar answer

başvurulan