Skip to content

Instantly share code, notes, and snippets.

@384400
Last active September 10, 2015 13:11
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save 384400/04cc79ed0bf2c2466f37 to your computer and use it in GitHub Desktop.
Save 384400/04cc79ed0bf2c2466f37 to your computer and use it in GitHub Desktop.
[JavaScript] Valider une date en JavaScript

Comment valider une date en JavaScript, puisque les expressions régulières proposent une validation insuffisante ?

Nous pourrions, avec une simple expression régulière, vouloir valider une date :

<script>
function ValidDate(day) {
    var pattern = new RegExp(/^\d{2}-\d{2}-\d{4}$/);
    return pattern.test(day);
}
</script>

Avec cette syntaxe, serait alors considérée valide la date 31-11-2015 !

Cet écueil peut être sans importance, puisqu'il convient en général de valider les données du côté du serveur, par exemple avec la class DateTime disponible sous Hypertext Preprocessor (Php).

Par exemple, nous pourrions utiliser...

<?php
$date = DateTime::createFromFormat('d-m-Y', '31-11-2015');
if(DateTime::getLastErrors()['warning_count'] == 0 && DateTime::getLastErrors()['error_count'] == 0) :
    print $date->format('d-m-Y');
else :
    echo 'non';
endif;
?>

La validation avec la class DateTime est commode, la méthode avec checkdate aussi, mais moins intuitive...

<?php
if(checkdate(11, 31, 2015)) : /* month, day, year */
    echo 'oui';
else :
    echo 'non';
endif;
?>

Cependant, il nous semble préférable de valider une date avant son traitement pour économiser les ressources du serveur et faciliter l'Interaction Homme-Machine (Imh).

Le champ de type date défini par Hypertext Markup Language (Html) 5 est loin d'être majoritairement supporté par les navigateurs et valide un contenu vide ou incorrect, comme l'indique alsacréations.

Avec le présent script, sont validées les dates au format JJ-MM-YYYY, y compris les 29 février, lorsque l'année est bissextile (quand on est né un 29 février, on attache de l'importance à cette question !).

Le calendrier grégorien est subtil quant au mode de calcul des années bissextiles : il existe un 29/02/2000, mais le 29/02/1900 et le 29/02/2100 n'existent pas.

La règle est résumée ainsi dans Wikipedia...

  1. Si l'année est divisible par 4, passez à l'étape 2, sinon passez à l'étape 5.
  2. Si l'année est divisible par 100, passez à l'étape 3. Sinon, passez à l'étape 4.
  3. Si l'année est divisible par 400, passez à l'étape 4. Sinon, passez à l'étape 5.
  4. L'année est une année bissextile (elle a 366 jours).
  5. L'année n'est pas une année bissextile (elle a 365 jours).

Notre fonction vérifie à la fois le format et le contenu.

Le code a été inspiré par une discussion sur stackoverflow.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Vérifier la validité d'une date avec JavaScript</title>
<meta name="description" content="Comment valider une date en JavaScript, puisque les expressions régulières proposent une validation insuffisante ?" />
</head>
<body>
<p><input type="text" id="date"></p>
<p><button id="check">Vérifier</button></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function ValidDate(day) {
var bitsDays = day.split('-');
var yDays = bitsDays[2],
mDays = bitsDays[1],
dDays = bitsDays[0];
var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
if (yDays % 400 === 0 || (yDays % 100 !== 0 && yDays % 4 === 0)) {
daysInMonth[1] = 29;
}
return dDays <= daysInMonth[--mDays];
}
jQuery(document).ready(function ($) {
jQuery('#check').on('click', function() {
var dateForm = jQuery('#date').val();
if (!ValidDate(dateForm)) {
alert('non');
} else {
alert('oui');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment