Jquery datepicker: xác thực ngày tháng/ngày/yyyy

Question

Tôi có một hộp văn bản và một datepicker bên cạnh nó và tôi đang sử dụng asp.net và người dùng có thể nhập ngày cũng như chọn ngày từ datepicker.

Làm cách nào để bạn xác thực xem ngày có được nhập chính xác không?

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#<%=StartDate.ClientID%>').datepicker({ showOn: 'button', 
        buttonImage: '../images/Calendar.png', 
        buttonImageOnly: true, onSelect: function() { }, 
        onClose: function() { $(this).focus(); } 
      }); 
     }); 
    </script> 

Answer 1

Nếu bạn đang sử dụng ASP.NET, bạn có thể sử dụng ASP.NET Compare Validator [ASP.NET Date Validator].

<asp:TextBox ID="tb" runat="server"></asp:TextBox> 

<asp:CompareValidator ID="cv" runat="server" 
ControlToValidate="tb" ErrorMessage="* Please enter a valid date!" Text="*" 
Operator="DataTypeCheck" Type="Date"></asp:CompareValidator> 

**** Update **

tôi mất javascript đã được thực hiện bởi các so sánh Validator trên và quấn một tùy chỉnh phương pháp jQuery Validation xung quanh nó:

<script type="text/javascript"> 
    $(document).ready(function() { 

     $.validator.addMethod("truedate", function (value, element, params) { 
      function GetFullYear(year, params) { 
       var twoDigitCutoffYear = params.cutoffyear % 100; 
       var cutoffYearCentury = params.cutoffyear - twoDigitCutoffYear; 
       return ((year > twoDigitCutoffYear) ? (cutoffYearCentury - 100 + year) : (cutoffYearCentury + year)); 
      } 

      var yearFirstExp = new RegExp("^\\s*((\\d{4})|(\\d{2}))([-/]|\\. ?)(\\d{1,2})\\4(\\d{1,2})\\.?\\s*$"); 
      try { 
       m = value.match(yearFirstExp); 
       var day, month, year; 
       if (m != null && (m[2].length == 4 || params.dateorder == "ymd")) { 
        day = m[6]; 
        month = m[5]; 
        year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); 
       } 
       else { 
        if (params.dateorder == "ymd") { 
         return null; 
        } 
        var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-/]|\\. ?)(\\d{1,2})(?:\\s|\\2)((\\d{4})|(\\d{2}))(?:\\s\u0433\\.)?\\s*$"); 
        m = value.match(yearLastExp); 
        if (m == null) { 
         return null; 
        } 
        if (params.dateorder == "mdy") { 
         day = m[3]; 
         month = m[1]; 
        } 
        else { 
         day = m[1]; 
         month = m[3]; 
        } 
        year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); 
       } 
       month -= 1; 
       var date = new Date(year, month, day); 
       if (year < 100) { 
        date.setFullYear(year); 
       } 
       return (typeof (date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate()) ? date.valueOf() : null; 
      } 
      catch (err) { 
       return null; 
      } 
     }, "Please enter an actual date."); 

     $("#form1").validate(); 

     $("#one").rules('add', 
     { 
      truedate: { 
       cutoffyear: '2029', 
       dateorder: 'mdy' 
      } 
     }); 
    }); 

</script> 

<input id="one" /> 

Answer 2

Vì bạn là đã sử dụng jquery, bạn có thể xem http://bassistance.de/jquery-plugins/jquery-plugin-validation/ có tính linh hoạt tuyệt vời để xác thực ..

Answer 3

Tôi sử dụng trình xử lý này để xác thực đầu vào:

onClose: function(dateText, inst) { 
     try { 
      $.datepicker.parseDate('dd/mm/yy', dateText); 
     } catch (e) { 
      alert(e); 
     }; 

Hope, nó sẽ có ích cho ai đó

Answer 4

Tôi đang sử dụng một hỗn hợp của phương pháp Katrin & Doc Holiday, sử dụng phương pháp hữu ích parseDate sự kiểm soát datepicker trong một validator tùy chỉnh Tôi đã gọi IsDate.

Chỉ cần thay đổi đối số định dạng trong parseDate thành giá trị thích hợp (tham chiếu: http://docs.jquery.com/UI/Datepicker/parseDate).

$(document).ready(function() 
    { 
     $.validator.addMethod('isDate', function(value, element) 
     { 
      var isDate = false; 
      try 
      { 
       $.datepicker.parseDate('dd/mm/yy', value); 
       isDate = true; 
      } 
      catch (e) 
      { 

      } 
      return isDate; 
     }); 

     $("#form1").validate(); 

     $("#dateToValidate").rules("add", { isDate: true, messages: {isDate: "Date to Validate is invalid."} }); 
    }); 

Có thể đây không phải là cách thực hành tốt nhất để trình xác thực tham chiếu đến kiểm soát giao diện người dùng nhưng điều quái gì. :)