贝宝样式日期输入答案

【问题标题】：PayPal Style Date input贝宝样式日期输入
【发布时间】：2015-07-19 07:48:10
【问题描述】：

我正在设计一个注册表单。我对 PayPal 的注册表单很着迷，我们只能在日期上输入数字，它会自动使用“/”将它们分开，我们不能添加更多数字。这是链接https://www.paypal.com/signup/create?country.x=AU

我想知道这是怎么做到的。这是我在等待时发现的。

<input type="text" id="dob" maxlength="10" value="" pattern="(0[1-9]|[12][0-9]|3[01])/(([0][1-9])|([1][0-2]))/((1|2)[0-9]{3})" name="dob" required="required" class="hasHelp validate userText" autocomplete="off" autocorrect="off" autocapitalize="off" aria-required="true" data-placeholder-text="DD/MM/YYYY" data-label="Date of birth" data-format="ddmmyyyy" data-today="19/07/2015" data-separator="/" aria-invalid="false">

【问题讨论】：

标签： jquery html validation input

【解决方案1】：

您可以使用 jQuery 的输入掩码插件之一。
例如：http://robinherbots.github.io/jquery.inputmask/

那里有一个演示，你可以download it from here。

【讨论】：

【解决方案2】：

HTML 5 有一个用于输入元素的模式属性，Paypal 实现了该属性：

pattern="(0[1-9]|[12][0-9]|3[01])/(([0][1-9])|([1][0-2]))/((1|2)[0-9]{3})"

您可以在网络上找到更多信息，例如 Mozilla Developer Network 上的此规范。

【讨论】：