2016-04-01 14 views
0

Ich habe dieses datepicker welches als date-picker Klasse definiert ist. Ich möchte überprüfen, ob das Datum gültig ist, ich meine, wenn der Benutzer das Datum per Tastatur ändert, zum Beispiel, wenn Tag mehr als 31 oder Monat mehr als 12 eingibt sollte es einen Fehler geben. Ich habe diese isValidDate Funktion geschrieben, aber es funktioniert nicht gut. Ich habe irgendwo gelesen, dass es eine valid() Funktion für Datepicker gibt.datepicker valid() Funktion, um zu prüfen, ob das Datum gültig ist

jsFiddle

$(function() { 
 
    $(".date-picker").datepicker({ 
 
    dateFormat: 'dd/mm/yy' 
 
    }); 
 

 
    $(".date-picker").each(function() { 
 
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>'); 
 
    }); 
 

 
    $('input:button').click(function(e) { 
 
    $("#fDate").removeClass("red"); 
 

 
    var fromDate = $("#fDate").val(); 
 

 
    if (!isValidDate(fromDate)) { 
 
     $("#fDate").addClass("red"); 
 
    } 
 

 
    if (errors) e.preventDefault(); 
 
    }); 
 

 
    function isValidDate(date) { 
 
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date); 
 
    if (matches == null) return false; 
 
    var d = matches[2]; 
 
    var m = matches[2]; 
 
    var y = matches[3]; 
 

 
    if (y > 2100 || y < 1900) return false; // accept only recent & not too far years 
 

 
    var composedDate = new Date(y, m, d); 
 
    return composedDate.getDate() == d && composedDate.getMonth() == m && composedDate.getFullYear() == y; 
 
    } 
 
});
.imageInputWrapper { 
 
    width: 172px; 
 
    border: solid 1px white; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    box-shadow: 0 2px 2px 0 #C2C2C2; 
 
} 
 
.red { 
 
    box-shadow: 0px 0px 2px 2px red; 
 
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
 
<form> 
 
    <input id="fDate" class="date-picker" type="text" name="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" /> 
 
    <img src="http://s9.postimg.org/nl2mcq2rv/calendar.png" id="fromDateImgId"> 
 
    <br/> 
 
    <input type="button" value="submit"> 
 
    </table> 
 
</form>

, wenn Sie 44 in den Tag Abschnitt einfügen wird es keine Fehler in meinem Code geben.

Antwort

0

Sie können Date.parse() für Ihre Validierungsfunktion verwenden.

Beispiel

function isValidDate(str) { 
    return !isNaN(Date.parse(str)); 
} 
+0

das Problem ist nicht zu prüfen, ob es sich um eine Zahl ist oder nicht, ich will es nicht weiter, als eine Grenze, Tage und Monate gehen – reshad

+0

'Date.parse() 'überprüft, ob Ihre Datumszeichenfolge gültig ist oder nicht, nicht nur zur Überprüfung von Zahlen. 'Date.parse (" 44/04/2016 ") // -> NaN' ' Date.parse ("01.04.2016") // -> 1451840400000' – hitamu

1

Ihr Code funktioniert gut. Nur ein bisschen zwickt.

function isValidDate(date) { 
    var matches = /^(\d+)[-\/](\d+)[-\/](\d+)$/.exec(date); 
    if (matches == null) return false; 
    var d = matches[1]; 
    var m = matches[2]; 
    var y = matches[3]; 
    if (y > 2100 || y < 1900) return false; 
    var composedDate = new Date(y+'/'+m+'/'+d); 
    return composedDate.getDate() == d && composedDate.getMonth()+1 == m && composedDate.getFullYear() == y; 
    } 

Arbeits Geige: https://jsfiddle.net/ppw1k3yu/1/

Verwandte Themen