如何格式化出生日期的文本框

我已決定使用文本框來獲取用戶的出生日期，我正在試圖製作此文本框，以便將用戶輸入限制爲DD/MM/YYYY，我試圖得到的是斜線（/）在文本框內是固定的。用戶不會希望有「/」，所以我試圖把它固定在文本框中鍵入如何格式化出生日期的文本框

這就是我想要達到

| ____/____/___ |

到目前爲止我的代碼只是一個基本的文本框，但在這裏它是無論如何

<label for="title">Date of Birth</label> 
<input type="text" name="dateofbirth" id="dateofbirth"> 
</div>

來源

2017-04-11 TF120

我認爲這是你在找什麼：

How to do date masking using javascript (without JQuery)?

如果檢查PRATIK沙阿回答有你要找的格式，它似乎工作。

代碼：

<input 
    type="text" 
    name="date" 
    placeholder="dd/mm/yyyy" 
    onkeyup=" 
     var v = this.value; 
     if (v.match(/^\d{2}$/) !== null) { 
      this.value = v + '/'; 
     } else if (v.match(/^\d{2}\/\d{2}$/) !== null) { 
      this.value = v + '/'; 
     }" 
    maxlength="10" 
>

它適用於我的Firefox 52.0.2

希望它能幫助。

來源

2017-04-11 21:15:43 FFdeveloper

這是理想的，因爲它適用於所有瀏覽器，謝謝！ – TF120

請注意，這在嘗試退格時不起作用。你可以做的是在每個if語句的末尾添加'！== null && backspaceTriggered'。然後添加一個簡單設置'this.value = v'的'else' – James111

有了HTML5，你可以簡單地使用日期輸入類型：

<input type="date" name="dateofbirth" id="dateofbirth">

這裏的MDN參考號：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

來源

2017-04-11 19:56:36

這一年似乎有點挑剔，這很有趣 – Derek

這是我正在尋找的，我唯一的擔心是，在Firefox上這似乎不工作，我不知道這是否是我的目的或者只是不支持Firefox。無論如何感謝 – TF120

FF不支持。 – Jef

這可能是你要找的。

<input type="date" name="dateofbirth" id="dateofbirth">

請記住，這在某些瀏覽器中不起作用 - Firefox和較舊的IE版本。

來源

2017-04-11 19:58:13 Jef

您可以嘗試jQuery的maskedInput插件。這基本上是你在找什麼。 https://github.com/digitalBush/jquery.maskedinput

來源

2017-04-11 19:58:24

如何格式化出生日期的文本框

回答

相關問題