Quelle est la meilleure façon d'analyser une fois en Date objet de la saisie de l'utilisateur en Javascript?
Je suis en train de travailler sur une forme de widget pour les utilisateurs à entrer un moment de la journée dans une saisie de texte (pour une application de calendrier). À l'aide de JavaScript (nous sommes à l'aide de jQuery FWIW), je veux trouver la meilleure façon d'analyser le texte que l'utilisateur entre dans un JavaScript Date()
objet donc je peut facilement effectuer des comparaisons et d'autres choses sur elle.
J'ai essayé le parse()
méthode et c'est un peu trop pointilleux pour mes besoins. Je m'attends à ce qu'il soit capable d'analyser correctement l'exemple suivant la saisie d'heures (en plus des autres une logique similaire formats d'heure) que la même Date()
objet:
- 1:00 pm
- 1:00
- 1:00 p
- 1:00pm
- 1:00p.m.
- 1:00p
- 1 h
- 1 h
- 1 p
- 1pm
- 1p.m.
- 1p
- 13:00
- 13
Je pense que je peux utiliser des expressions régulières pour séparer l'entrée et d'extraire les informations que je souhaite utiliser pour créer mon Date()
objet. Quelle est la meilleure façon de le faire?
Vous devez vous connecter pour publier un commentaire.
Une solution rapide qui fonctionne sur l'entrée que vous avez spécifié:
JS:
Il doit travailler pour quelques autres variétés (même si h est utilisé, il va encore au travail par exemple). Évidemment, c'est assez rudimentaire, mais il est également très léger (beaucoup moins cher à l'usage qu'à l'intérieur d'une bibliothèque, par exemple).
Tous les exemples fournis ne fonctionnent fois à partir de 12:00 à 12:59 am. Ils ont également lever une erreur si la regex ne correspond pas à un temps. Le suivant traite de ce:
JS:
Cela fonctionne pour des chaînes qui contiennent une fois n'importe où à l'intérieur d'eux. Donc "abcde12:00pmdef" serait analysé et retour à 12h. Si le résultat souhaité est qu'il retourne uniquement un moment où la chaîne ne contient qu'un temps l'expression régulière suivante peut être utilisée à condition de remplacer "le temps[4]" avec "le temps[6]".
N'est pas la peine de le faire vous-même, il suffit d'utiliser datejs.
La plupart des regex solutions ici de générer des erreurs lors de la chaîne ne peut pas être analysé, et pas beaucoup d'entre eux représentent des chaînes de caractères comme
1330
ou130pm
. Même si ces formats n'étaient pas spécifiés par l'OP, je trouve critiques pour l'analyse des dates d'entrée par l'homme.Tout cela m'a fait penser que l'utilisation d'une expression régulière peut ne pas être la meilleure approche pour ce.
Ma solution est une fonction qui non seulement traite le moment, mais vous permet également de spécifier le format de sortie et une étape (intervalle) à qui à tour de minutes. À environ 70 lignes, c'est toujours léger et analyse tout ce qui précède, ainsi que les formats sans les deux-points.
JS:
Voici une amélioration sur Joe version. N'hésitez pas à modifier davantage.
JS:
Changements:
Je suis tombé sur un couple de petits défauts dans la mise en œuvre de John Resig de la solution. Voici la modification de la fonction que j'ai été en utilisant basé sur sa réponse:
JS:
À tout moment.Convertisseur capable d'analyser les dates/heures dans de nombreux formats différents:
http://www.ama3.com/anytime/
La le temps paquet est de 0,9 kbs en taille. Disponible avec NPM et bower les gestionnaires de paquets.
Voici un exemple directement à partir de la
README.md
:C'est un plus robuste approche qui prend en compte la façon dont les utilisateurs ont l'intention d'utiliser ce type d'entrée. Par exemple, si un utilisateur a entré "12", ils s'attendre à 12h (midi), et pas 12h. Ci-dessous la fonction gère tout cela. Il est également disponible ici: http://blog.de-zwart.net/2010-02/javascript-parse-time/
JS:
C'est une chaîne de prototype, de sorte que vous pouvez l'utiliser comme ceci:
Voici une solution de plus pour tous ceux qui sont à l'aide d'un 24 heures, qui soutient:
JS:
J'ai apporté quelques modifications à la fonction ci-dessus à l'appui d'un peu plus de formats.
N'est pas nettoyé, mais fonctionne pour tout ce que je pense de.
JS:
Voici une autre approche qui couvre l'original de la réplique, dans la mesure du raisonnable nombre de chiffres, de données d'entrée par les chats, et les erreurs logiques. L'algorithme suit:
De conversion les heures, les minutes, et post meridiem à un objet Date est un exercice pour le lecteur (de nombreuses autres réponses montrer comment faire cela).
JS:
Avec jQuery, la nouvelle définition de la Chaîne de prototype est utilisé comme suit:
Pourquoi ne pas utiliser la validation d'affiner ce que l'utilisateur peut mettre en et simplifier la liste pour inclure uniquement les formats qui peuvent être analysés (ou analysé après quelques réglages).
Je ne pense pas que c'est trop demander à un utilisateur de mettre un temps dans un format pris en charge.
dd:dd A(m)/P(m)
dd A(m)/P(m)
dd
grâce
Beaucoup de réponses donc un de plus ne fera pas de mal.
JS:
Pour être bien robuste, il doit vérifier que chaque valeur est dans la plage de valeurs autorisées, e.g si am/pm heures doit être de 1 à 12 inclus, sinon 0 à 24 inclusivement, etc.
Une amélioration de Patrick McElhaney la solution de (sa ne gère pas les 12h correctement)
JS:
Je n'étais pas heureux avec les autres réponses j'ai donc fait un autre encore. Cette version:
undefined
sur l'entrée non valide, tels que "13:00" ou "11:65"localDate
paramètre, sinon renvoie une heure UTC à l'époque Unix (1er janvier 1970).1330
(pour désactiver, faire le premier ':' nécessaire dans la regex)^\s*
dans la regex)Edit: c'est maintenant une package y compris un
timeToString
formateur:npm i simplertime
Si vous ne voulez secondes ici est un liner
Tableau de Compilation des autres réponses
Tout d'abord, je ne peux pas croire que qu'il n'est pas une fonctionnalité intégrée ou même un tiers solide de la bibliothèque qui peut gérer cela. En fait, c'est le développement web, donc je peux y croire.
En train de tester tous les cas de bord avec tous ces différents algorithmes a été faire ma tête tourner, j'ai donc pris la liberté de la compilation de toutes les réponses et les tests dans ce fil de discussion dans un tableau pratique.
Le code (et table) est inutilement large pour inclure en ligne, donc j'ai fait un JSFiddle:
http://jsfiddle.net/jLv16ydb/4/show
N'hésitez pas à fourche de mon violon et ajouter plus d'algorithmes et des cas de test
Je n'ai pas ajouter de comparaisons entre le résultat et les "attendus" de sortie, car il ya des cas où les "attendus" de la production pourrait être débattue (par exemple, devrait
12
être interprété comme12:00am
ou12:00pm
?). Vous aurez à passer à travers la table et voir algorithme qui fait le plus de sens pour vous.Remarque: Les couleurs n'indiquent pas nécessairement la qualité ou la "prévisibilité" de sortie, ils indiquent seulement le type de sortie:
red
= js erreur renvoyéyellow
= "falsy" valeur (undefined
,null
,NaN
,""
,"invalid date"
)green
= jsDate()
objetlight green
= tout le resteOù un
Date()
objet est la sortie, je la convertir en 24 hHH:mm
format pour faciliter la comparaison.Après avoir bien tester et d'enquêter à travers mon autre compilation de réponse, j'en ai conclu que @Dave Jarvis la solution la plus proche de ce que je ressentais étaient raisonnables, les sorties et edge-le traitement des affaires. Pour référence, j'ai regardé ce que Google Calendrier de temps, les entrées reformaté le temps de après la sortie de la zone de texte.
Même encore, j'ai vu qu'il n'a pas à traiter certains (quoique bizarre) bord de cas que Google Agenda fait. J'ai donc retravaillé à partir du sol en place et c'est ce que je suis venu avec. J'ai aussi ajouté ça à ma compilation répondre.
J'ai l'impression que c'est le plus proche que je peux obtenir pour mes besoins, mais les suggestions sont les bienvenues. Remarque: C'est à l'Américaine centrée sur que c'est par défaut am/pm pour certains modèles:
1
=>13:00
(1:00pm
)1100
=>23:00
(11:00pm
)456
=>16:56
(4:56pm
)