web-dev-qa-db-fra.com

Comment valider une date dans ce format (aaaa-mm-jj) en utilisant jquery?

J'essaie de valider une date dans ce format: (aaaa-mm-jj). J'ai trouvé cette solution, mais le format utilisé n'est pas le bon, comme dans: (mm/jj/aaaa).

Voici le lien vers cette solution: http://jsfiddle.net/ravi1989/EywSP/848/

Mon code est ci-dessous:

function isDate(txtDate)
{
    var currVal = txtDate;
    if(currVal == '')
        return false;

    var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
    var dtArray = currVal.match(rxDatePattern); // is format OK?

    if (dtArray == null) 
        return false;

    //Checks for mm/dd/yyyy format.
    dtMonth = dtArray[1];
    dtDay= dtArray[3];
    dtYear = dtArray[5];        

    if (dtMonth < 1 || dtMonth > 12) 
        return false;
    else if (dtDay < 1 || dtDay> 31) 
        return false;
    else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31) 
        return false;
    else if (dtMonth == 2) 
    {
        var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
        if (dtDay> 29 || (dtDay ==29 && !isleap)) 
                return false;
    }
    return true;
}

Quel modèle de regex puis-je utiliser pour cela qui tiendra compte des dates et années bissextiles invalides?

javascriptjquery
17
user2648752

J'ai développé juste un peu sur la fonction isValidDate Thorbin posté ci-dessus (en utilisant une regex). Nous utilisons une regex pour vérifier le format (pour nous empêcher d’obtenir un autre format qui serait valide pour Date). Après cette vérification lâche, nous l'exécutons ensuite via le constructeur Date et renvoyons true ou false s'il est valide dans ce format. Si ce n'est pas une date valide, nous obtiendrons faux avec cette fonction.

function isValidDate(dateString) {
  var regEx = /^\d{4}-\d{2}-\d{2}$/;
  if(!dateString.match(regEx)) return false;  // Invalid format
  var d = new Date(dateString);
  if(Number.isNaN(d.getTime())) return false; // Invalid date
  return d.toISOString().slice(0,10) === dateString;
}


/* Example Uses */
console.log(isValidDate("0000-00-00"));  // false
console.log(isValidDate("2015-01-40"));  // false
console.log(isValidDate("2016-11-25"));  // true
console.log(isValidDate("1970-01-01"));  // true = Epoch
console.log(isValidDate("2016-02-29"));  // true = leap day
console.log(isValidDate("2013-02-29"));  // false = not leap day

44
Goblinlord

Vous pouvez également simplement utiliser des expressions régulières pour effectuer un travail légèrement plus simple si cela vous suffit (par exemple, comme indiqué dans [1]).

Ils sont intégrés à javascript afin que vous puissiez les utiliser sans aucune bibliothèque. 

function isValidDate(dateString) {
  var regEx = /^\d{4}-\d{2}-\d{2}$/;
  return dateString.match(regEx) != null;
}

serait une fonction pour vérifier si la chaîne donnée est composée de quatre nombres - deux nombres - deux nombres (presque aaaa-mm-jj). Mais vous pouvez faire encore plus avec des expressions plus complexes, par exemple. vérifier [2].

isValidDate("23-03-2012") // false
isValidDate("1987-12-24") // true
isValidDate("22-03-1981") // false
isValidDate("0000-00-00") // true
18
Thorben Bochenek

Puisque jQuery est marqué, voici un moyen simple et convivial de valider un champ qui doit être une date (vous aurez besoin du plugin jQuery validation ):

html

<form id="frm">
<input id="date_creation" name="date_creation" type="text" />
</form>

jQuery

$('#frm').validate({
  rules: {
    date_creation: {
      required: true,
      date: true
    }
  }
});

Exemple DEMO +

UPDATE: Après quelques recherches, je n'ai trouvé aucune preuve d'un paramètre prêt à l'emploi pour définir un format de date spécifique.

Cependant, vous pouvez insérer l'expression régulière de votre choix dans une règle personnalisée :)

$.validator.addMethod(
    "myDateFormat",
    function(value, element) {
        // yyyy-mm-dd
        var re = /^\d{4}-\d{1,2}-\d{1,2}$/;

        // valid if optional and empty OR if it passes the regex test
        return (this.optional(element) && value=="") || re.test(value);
    }
);

$('#frm').validate({
  rules: {
    date_creation: {
      // not optional
      required: true,
      // valid date
      date: true
    }
  }
});

Cette nouvelle règle impliquerait une mise à jour de votre balisage:

<input id="date_creation" name="date_creation" type="text" class="myDateFormat" />
10
Frederik.L

essayez ceci Voici la démo qui fonctionne :

$(function() {
    $('#btnSubmit').bind('click', function(){
        var txtVal =  $('#txtDate').val();
        if(isDate(txtVal))
            alert('Valid Date');
        else
            alert('Invalid Date');
    });

function isDate(txtDate)
{
    var currVal = txtDate;
    if(currVal == '')
        return false;

    var rxDatePattern = /^(\d{4})(\/|-)(\d{1,2})(\/|-)(\d{1,2})$/; //Declare Regex
    var dtArray = currVal.match(rxDatePattern); // is format OK?

    if (dtArray == null) 
        return false;

    //Checks for mm/dd/yyyy format.
    dtMonth = dtArray[3];
    dtDay= dtArray[5];
    dtYear = dtArray[1];        

    if (dtMonth < 1 || dtMonth > 12) 
        return false;
    else if (dtDay < 1 || dtDay> 31) 
        return false;
    else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31) 
        return false;
    else if (dtMonth == 2) 
    {
        var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
        if (dtDay> 29 || (dtDay ==29 && !isleap)) 
                return false;
    }
    return true;
}

});

l'expression régulière modifiée est:

var rxDatePattern = /^(\d{4})(\/|-)(\d{1,2})(\/|-)(\d{1,2})$/; //Declare Regex
5
Zaheer Ahmed

Je recommande d’utiliser le Utiliser le plugin de validation jquery et le sélecteur de date jquery ui

jQuery.validator.addMethod("customDateValidator", function(value, element) {
// dd-mm-yyyy
   var re = /^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$/ ; 
   if (! re.test(value) ) return false
   // parseDate throws exception if the value is invalid
   try{jQuery.datepicker.parseDate( 'dd-mm-yy', value);return true ;}
   catch(e){return false;} 
   },
   "Please enter a valid date format dd-mm-yyyy"
);

this.ui.form.validate({
    debug: true,
    rules : {
    title : { required : true, minlength: 4 }, 
    date : { required: true, customDateValidator: true }
    }
}) ;

En utilisant Jquery et le sélecteur de date, créez une fonction avec

// dd-mm-yyyy
var re = /^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$/ ; 
 if (! re.test(value) ) return false
// parseDate throws exception if the value is invalid
try{jQuery.datepicker.parseDate( 'dd-mm-yy', value);return true ;}
catch(e){return false;}

Vous pouvez utiliser uniquement l'expression régulière pour la validation 

// dd-mm-yyyy
var re = /^([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$/ ; 
return re.test(value)

Bien sûr, le format de date devrait être de votre région 

3
Pascal

Réorganisez l'expression régulière sur:

/^(\d{4})([\/-])(\d{1,2})\2(\d{1,2})$/

J'ai fait un peu plus que réorganiser les termes, je l'ai également fait pour qu'il n'accepte pas les dates "brisées" comme yyyy-mm/dd.

Après cela, vous devez ajuster vos variables dtMonth etc. comme ceci:

dtYear = dtArray[1];
dtMonth = dtArray[3];
dtDay = dtArray[4];

Après cela, le code devrait fonctionner correctement.

1
Niet the Dark Absol

Violon de travail  ici Démo

Changé votre fonction de validation à cette

function isDate(txtDate)
{
return txtDate.match(/^d\d?\/\d\d?\/\d\d\d\d$/);
}
0
Vinay Pratap Singh

Utilisez simplement le constructeur Date pour comparer avec l’entrée de chaîne:

function isDate(str) {
  return 'string' === typeof str && (dt = new Date(str)) && !isNaN(dt) && str === dt.toISOString().substr(0, 10);
}

console.log(isDate("2018-08-09"));
console.log(isDate("2008-23-03"));
console.log(isDate("0000-00-00"));
console.log(isDate("2002-02-29"));
console.log(isDate("2004-02-29"));

Édité: Répondant à l'un des commentaires

Bonjour, cela ne fonctionne pas sur IE8 avez-vous une solution pour - Mehdi Jalal

function pad(n) {
  return (10 > n ? ('0' + n) : (n));
}

function isDate(str) {
  if ('string' !== typeof str || !/\d{4}\-\d{2}\-\d{2}/.test(str)) {
    return false;
  }
  var dt = new Date(str.replace(/\-/g, '/'));
  return dt && !isNaN(dt) && 0 === str.localeCompare([dt.getFullYear(), pad(1 + dt.getMonth()), pad(dt.getDate())].join('-'));
}

console.log(isDate("2018-08-09"));
console.log(isDate("2008-23-03"));
console.log(isDate("0000-00-00"));
console.log(isDate("2002-02-29"));
console.log(isDate("2004-02-29"));

0
user2575725