devc++输入更快

一些历史(Some history)

Some time ago, Simon Willison published a "Better Date Input" javascript that accepts all kinds of user inputs and tries to figure out a date out of it. For example "2006-02-08", "today", "next Friday" and so on. It's really neat, the original blog posting is here and a demo is available. A rehash of the idea was made by Nathaniel Brown, adding a popup calendar and some other tweaks/features (talking about it and a demo).

不久前，西蒙·威利森( Simon Willison)发布了一种“更好的日期输入” JavaScript，该JavaScript接受所有类型的用户输入并试图从中找出日期。 例如“ 2006-02-08”，“今天”，“下一个星期五”等等。 真的很整洁，原始的博客发布在这里，并提供了一个演示。 纳撒尼尔·布朗( Nathaniel Brown)对这个想法进行了重新表述，增加了一个弹出日历和其他一些调整/功能(谈论它和一个演示)。

Thanks to Derek of Subtitle Designs, who pointed out this "neato" script to me (for the second time!), I got curious as to what is involved in hacking the script to work with time instead of dates.

感谢Subtitle Designs的Derek(第二次向我指出了这个“ neato”脚本)，我对破解该脚本以解决时间而不是日期所涉及的内容感到好奇。

结果 (Result)

• A demo - just type something time-like, like "9" or "1pm" or "12:34:56" or "1300"

  演示-只需输入类似时间的内容，例如“ 9”或“ 1pm”或“ 12:34:56”或“ 1300”

• The javascript

  JavaScript

工作原理(只需10个简单步骤(或更少);)) (How it works (in 10 easy steps (or less) ;)))

1. User-entered value is passed to magicTime().

   用户输入的值将传递给magicTime() 。

2. magicTime() asks parseTimeString() to parse that string and to return a Date object.

   magicTime()要求parseTimeString()解析该字符串并返回Date对象。

3. parseTimeString() loops through an array of objects, each having a regular expression, trying to match the entered text.

   parseTimeString()遍历对象数组，每个对象都有一个正则表达式，试图匹配输入的文本。

4. Once a regexp match is found, a corresponding function is called to "translate" the match to a valid Date

   找到正则表达式匹配项后，将调用相应的函数以将匹配项“翻译”为有效Date

5. The result Date is passed back to magicTime(), which calls the callback function getReadable() for any tweaking and formatting of the result before displaying it (default output is hh:mm:ss)

   结果Date被传递回magicTime() ，它在显示结果之前调用回调函数getReadable()进行结果的任何调整和格式化(默认输出为hh：mm：ss)

原始想法的改进 (Improvements of the original idea)

Apart from just processing time instead of dates, there are a few improvements to the original script.

除了只处理时间而不是日期以外，原始脚本还有一些改进。

• Regexps examples and (unit?) testing. In the array of objects where the regexp rules are defines, I've added another property - an array of examples illustrating sample matches. The purpose is two fold - to quickly provide a help with a list of supported formats and also to have the ability to test the regexps semi-automatically. So then the function getExamples() is called, it produces a list of acceptable values. If the same function is called passing a TRUE parameter, these example values are actually parsed and the result of the parsing is returned. This allows to quickly test all the regexps. Click "help" and/or "run tests!" in the demo for an illustration.

  正则表达式示例和(单元？)测试。 在定义regexp规则的对象数组中，我添加了另一个属性-一系列示例样本匹配示例。 目的有两个：Swift提供所支持格式的帮助，并具有半自动测试正则表达式的能力。 因此，将调用函数getExamples() ，它会生成可接受值的列表。 如果调用传递TRUE参数的相同函数，则实际上将解析这些示例值，并返回解析结果。 这样可以快速测试所有正则表达式。 点击“帮助”和/或“运行测试！” 在演示中进行说明。

• getReadable() - a function that formats the output is introduced, allowing the users of this script to customize it quickly without interfering with the main logic. In this function you can opt for dropping the seconds, or rounding to the next minute, or five minutes, or an hour, or anything that has to do with displaying the result of the successful parse.

  getReadable() -引入了一种格式化输出的函数，该脚本的用户可以快速自定义它，而不会干扰主逻辑。 在此功能中，您可以选择减少秒数，或舍入到下一分钟，五分钟或一个小时，或与显示成功的解析结果有关的任何操作。

• Optional message area. The message area, placed under the text box is optional. There is now a try..catch to make sure no JS error occurs if it's missing.

  可选消息区域。 放置在文本框下方的消息区域是可选的。 现在有一个try..catch ，以确保如果缺少JS错误都不会发生。

如何使用脚本 (How to use the script)

It shouldn't be a problem to integrate this into your application. You need to:

将其集成到您的应用程序中应该不是问题。 你需要：

1. Get the javascript

   获取JavaScript

2. (optionally) Tweak getReadable() to match your needs. Remember that at this time all parsing work is done and you have a valid Date object which you only need to display to the user

   (可选)调整getReadable()以满足您的需求。 请记住，此时所有解析工作都已完成，并且您具有有效的Date对象，只需要向用户显示即可

3. (optionally) Place a div to display messages, related to the text box (see the demo). Name it with id id-of-the-input-messages

   (可选)放置div以显示与文本框相关的消息(请参见演示)。 用id id-of-the-input -messages

4. Call magicTime() when you think appropriate (like onblur), passing the input element (e.g. document.getElementById('id-of-the-input'), or just this, depending from where you call it)

   当您认为合适时(如onblur )，调用magicTime() ，传递输入元素(例如document.getElementById('id-of-the-input')或仅this元素，具体取决于调用位置)

反馈 (Feedback)

Any comments, bug reports or requests are welcome! Thanks!

欢迎任何评论，错误报告或要求！ 谢谢！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/javascript-time-input/

devc++输入更快