Javascript Girl
  1. Javascript Girl
  3. Comment formater automatiquement les entrées de la boîte à texte
Intereting Posts
Quand et comment utilisez-vous JavaScript côté serveur? Comment demander une confirmation lors de la fermeture d'une fenêtre? Ajout et suppression de noeuds dans D3js Force Graph JQuery Force définit l'attribut src pour iframe Filtrage de json similaire à mysql "like" operator Besoin d'un journaliste compétent pour le karma Jasmine Intercepter tous les appels ajax? Comment puis-je exécuter un programme ou un fichier batch sur le côté client? Alternatives pour XML Synchronous XMLHttpRequest (comme synchronisation dans Safari) Pourquoi laisser un point-virgule rompre ce code? Swagger générant javascript-fermeture-client angulaire La toile html5 fait clic sur le détecteur de forme du chemin Bézier Ajoutez dynamiquement une étiquette de script avec src qui peut inclure document.write HTML: Obtenir un document de l'IFrame Enregistrez et chargez un organigramme sur jsPlumb

Comment formater automatiquement les entrées de la boîte à texte

 
<tr> <td><label>Birthdate</label> <input type="text" placeholder="mm/dd/yyyy" name="birthdate" maxlength="10"/> </td> </tr>

Eh bien, mon code fonctionne mais je veux que mon "texte de type de saisie" forme automatiquement comme une date (html 5 input type = date) car dans mon Servlet je le convertis en Age. Le problème est que, si j'utilise le "type d'entrée = date", la conversion est une erreur, j'ai donc décidé d'utiliser "input type = text" et ça marche. Il est donc possible de mettre automatiquement "/" dans ce format "mm / jj / aaaa"? Par exemple, si l'utilisateur saisit 2 caractères, un "/" entrera automatiquement, etc.

Servlet pour date de naissance à Age 

  String birthdate = request.getParameter("birthdate"); int monthDOB = Integer.parseInt(birthdate.substring(0, 2)); int dayDOB = Integer.parseInt(birthdate.substring(3, 5)); int yearDOB = Integer.parseInt(birthdate.substring(6, 10)); DateFormat dateFormat = new SimpleDateFormat("MM"); java.util.Date date = new java.util.Date(); int thisMonth = Integer.parseInt(dateFormat.format(date)); dateFormat = new SimpleDateFormat("dd"); date = new java.util.Date(); int thisDay = Integer.parseInt(dateFormat.format(date)); dateFormat = new SimpleDateFormat("YYYY"); date = new java.util.Date(); int thisYear = Integer.parseInt(dateFormat.format(date)); int calAge = thisYear - yearDOB; if (thisMonth < monthDOB) { calAge = calAge - 1; } if (thisMonth == monthDOB && thisDay < dayDOB) { calAge = calAge - 1; } String age = Integer.toString(calAge);

Mise à jour sous la forme 

 <tr> <td><label for="inputName">Birthdate</label> <input type="text" placeholder="mm/dd/yyyy" id="input_date" name="birthdate" maxlength="10" /> </td> </tr>

Mise à jour dans la source 

 <script src="../scripts/formatter.js"></script> <script src="../scripts/formatter.min.js"></script> <script src="../scripts/jquery.formatter.js"></script> <script src="../scripts/jquery.formatter.min.js"></script>

Script ajouté 

 <script> $('#input_date').formatter({ 'pattern': '{{99}}/{{99}}/{{9999}}', 'persistent': true }); </script>

J'ai également essayé le javascript mais ça ne fonctionne pas …

Utilisez datepicker api de jquery ici est le lien DatePicker

Et voici le code de travail 

 <tr> <td><label>Birthdate</label> <input type="text" placeholder="mm/dd/yyyy" name="birthdate" id="birthdate" maxlength="10"/> </td> </tr> <script> $(function() { $( "#birthdate" ).datepicker(); }); </script>

MODIFIER 

 $("input[name='birthdate']:first").keyup(function(e){ var key=String.fromCharCode(e.keyCode); if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1)); var value=$(this).val(); if(value.length==2||value.length==5)$(this).val($(this).val()+'/'); });

C'est le code que vous pourriez avoir besoin

Voici le code brisé

J'ai regardé un projet sur GitHub (et je lui ai envoyé des commentaires pour l'améliorer) pour un format de formatage appelé formatter.js http://firstopinion.github.io/formatter.js/demos.html Cela pourrait être juste la chose vous cherchez.

Cela ne vous empêcherait pas de taper des dates comme le 53 mai … mais cela vous aidera à formater. 

 new Formatter(document.getElementById('date-input'), { 'pattern': '{{99}}/{{99}}/{{9999}}', 'persistent': true });

ou 

 $('#date-input').formatter({ 'pattern': '{{99}}/{{99}}/{{9999}}', 'persistent': true });

J'ai une alternative qui fonctionne avec un datepicker jquery-ui, sans formatter.js. Il est destiné à être appelé à partir des keyup de la keyup et de la change . Il ajoute un rembourrage nul. Il fonctionne avec différents formats de date supportés en construisant des expressions à partir de la chaîne dateFormat. Je ne peux pas penser à un moyen de le faire avec moins de trois remplacements. 

 // Example: mm/dd/yy or yy-mm-dd var format = $(".ui-datepicker").datepicker("option", "dateFormat"); var match = new RegExp(format .replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*") .replace(/mm|dd/g, "\\d{2}") .replace(/yy/g, "\\d{4}")); var replace = "$1/$2/$3$4" .replace(/\//g, format.match(/\W/)); function doFormat(target) { target.value = target.value .replace(/(^|\W)(?=\d\W)/g, "$10") // padding .replace(match, replace) // fields .replace(/(\W)+/g, "$1"); // remove repeats }

https://jsfiddle.net/4msunL6k/

User2897690 a eu la bonne idée, mais il n'a pas accepté les numéros Numpad. Donc ont pris leur javascript et l'ont modifié pour fonctionner.

Voici mon interprétation de leur code avec la fonctionnalité ajoutée. 

 $("input[name='birthdate']:first").keyup(function(e){ var chars = [48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105]; var key=chars.indexOf(e.keyCode); console.log(key); if(key==-1)$(this).val($(this).val().substr(0,$(this).val().length-1)); var value=$(this).val(); if(value.length==2||value.length==5)$(this).val($(this).val()+'/'); });