日期時間 (Dates)

不是所有的日期都是相同的。根據你的使用時機選擇適用的格式。

本頁內容：

1. 可記住的日期
2. 易於複製的日期
3. 大致的日期
4. 相對日期
5. 日曆控件
6. 格式化日期
7. 驗證日期

1. 可記住的日期

想要取得可記住的重要日期資訊，例如：出生年月日，最簡單的辦法是提供直接輸入欄位，讓使用者直接輸入日期數字。

例如：

輸入日期的介面不等於一定要用日曆控件不可。日曆控件不是那麼有用，尤其是當使用者已經知道確切日期時，還有某些情況下， 使用者難以選擇日期 時 。我們目前推薦使用三個數字輸入欄位，因為它比起單一輸入欄位更容易可靠地驗證使用者想輸入的正確日期。

提示：如果要叫出 iPhone 手機的數字鍵盤，加入其輸入元素所呈現的模式屬性： pattern="[0-9]*"

2. 易於複製的日期

如果您需要的日期格式，必須完全符合某個特定文件（例如：護照或信用卡）日期格式的話。如果能夠設計讓兩者的日期格式是一樣的，那麼使用者會更容易複製其日期。

3. 大致的日期

如果你並不需要一個確切的日期，或是說人們可能很難記住它（例如你的第一份工作是何時開始的），請確保允許使用者輸入大概的日期，如 “1996 年 6 月”。

4. 相對日期

一些日期做出相對於今天的日期或其他日期最有意義。特別常見於預約某種約會的時候。

像這些情況下，如果你讓使用者輸入或選擇像 [明天] 或 [四天後] 的相對日期。如果在接下來一週的這個日子是很重要的，那麼相對日期則可以幫助使用者特別顯示出這一天。

5. 日曆控件

日曆控件是僅適合於在一週中的日子有相關的，接近過去或未來的日期。它主要運用範例是預約日期。

如果您還需要顯示其他資訊，例如是否仍有空檔，那麼可以將日曆嵌入網頁中，但必須確保有足夠大的尺寸來顯示資訊，以利於閱讀。

以 JavaScript 寫出來的日曆控件不應該是設計日期輸入方式的唯一方案。

6. 日期格式

預設的日期格式，在使用是這樣的：

• 8 July 2014

時間區段的格式應是這樣的：

• 8 July to 9 August

7.驗證日期

當你確認日期，記得要檢查以下內容：

• 日期範圍 -檢查日期是連續的
• 過去的日期 -檢查日期是過去日期
• 未來的日期 -檢查日期是未來日期
• 輸錯日期 -如果日期輸入明顯錯誤，則顯示輸入錯誤的警示

譯注：
#1 中文環境的日期輸入問題，會與英文日期有截然不同的使用情境，格式也不同。
因此本篇文章所述的英文日期格式等建議，僅止於參考，不能直接應用於中文網頁上。

譯者：陳韻婷
校稿：Richard, Amy Hsu, James Chu
原始出處：https://www.gov.uk/service-manual/user-centred-design/resources/patterns/dates