Datepicker Jquery: sprawdzanie daty mm/dd/rrrr

Question

Mam pole tekstowe i datepicker obok niego i używam asp.net i użytkownik może wprowadzić datę, a także wybierz datę z datepicker.

Jak można sprawdzić, czy data jest wprowadzona poprawnie?

<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

Jeśli używasz ASP.NET, można użyć ASP.NET Porównaj 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> 

**** Aktualizacja **

Wziąłem JavaScript, który został wykonany przez Porównaj Walidatora powyżej owinięte niestandardową metodę jQuery Validation wokół niego:

<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

Ponieważ jesteś już za pomocą jquery, możesz sprawdzić http://bassistance.de/jquery-plugins/jquery-plugin-validation/, który ma dużą elastyczność do sprawdzania poprawności.

Answer 3

Używam tego modułu obsługi do sprawdzania poprawności danych wejściowych:

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

nadzieja, że ​​będzie użyteczny dla kogoś

Answer 4

używam mieszankę podejścia Katrin & Doc Holliday, wykorzystując metodę parseDate użytkową kontrolki datepicker w niestandardowy walidator Mam nazwie ISDATE.

Wystarczy zmienić argument formatowania w parseDate na odpowiednią wartość (referencja: 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."} }); 
    }); 

To chyba nie najlepsze praktyki dla walidator do odwoływania się do kontroli interfejsu użytkownika, ale co do cholery. :)