Date testing

Date format validation on keyup

by toubia95

HTML

<script src="https://raw.github.com/timrwood/moment/1.7.2/min/moment.min.js"></script>
<div><p><input type="text" name="date1" class="date1" placeholder="jj/mm/aaaa" /><small>  <span class="result"></span></small></p></div>

CSS

/* 1. http://quentinc.net/javascript/script22-controler-la-saisie-d%27une-date/*/
/* https://github.com/digitalBush/jquery.maskedinput */
/* http://www.asp-php.net/scripts/scripting/maskedit.php */
/* http://www.toutjavascript.com/savoir/savoir06_4.php3 */
/* http://forum.hardware.fr/hfr/Programmation/HTML-CSS-Javascript/appel-fonction-controlant-sujet_128604_1.htm */
/* http://www.developpez.net/forums/d542489/webmasters-developpement-web/javascript/forcer-format-saisie-champ/ */

body {padding: 10px;}

JavaScript

moment.months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
moment.weekdays = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];

// Interface
$(".date1").keyup(function() {
  var datevalue = $(".date1").val();
  DateFormat(datevalue);
});

// Fonction de vérification de la date au format jj/mm/aaaa
function DateFormat (champ) {
    var str = champ;
    var tab = str.split("/");
    var result = "";
    if (tab.length!=3) {
        var result = "Saisie incomplète ou invalide";
    }
    for (var i=0; i < 3; i++) { tab[i] = Math.floor(tab[i]); }
    var d = new Date(tab[2], tab[1]-1, tab[0]);

    if (tab[2] != d.getFullYear() || tab[1] != d.getMonth()+1 || tab[0] != d.getDate()) {
        var result = "Saisie incomplète ou invalide";
    } else { 
        var result = moment(d).format("dddd DD MMMM YYYY");
    }
    $('.result').text(result);
}