PayPal樣式日期輸入

Question

我正在設計註冊表單。我對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"> 

Answer 1

您可以使用jQuery的inputmask插件之一。
這裏是一個例子：http://robinherbots.github.io/jquery.inputmask/

有一個演示那裏，你可以download it from here。

Answer 2

HTML 5對投入要素的模式屬性，貝寶實現：

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

你可以在網上找到關於它的更多信息，例如該規範對Mozilla Developer Network。