關(guān)于網(wǎng)站設(shè)計中時間和日期輸入字段設(shè)計趨勢

處理來自用戶的日期信息總是很麻煩，沒有一種最好的方法可以做到這一點(diǎn)，并且信息通常有點(diǎn)過于笨重，無法創(chuàng)建一個干凈的輸入表單。但網(wǎng)絡(luò)已經(jīng)走過了漫長的道路，你可以遵循一些很棒的做法。下面我想分享處理時間/日期輸入字段的提示和資源。如果您遵循這些提示，您將可以更輕松地制作日期字段，以及滿足每個人的用戶體驗。

1、簡單的下拉菜單

第一個也是最明顯的選擇是每個字段的下拉菜單。這樣，您可以使用單獨(dú)的選擇菜單下拉菜單進(jìn)行月/日/年選擇。

這有其優(yōu)點(diǎn)和缺點(diǎn)。最大的好處是每個人都知道如何使用下拉字段。它是一個原生的HTML元素，每個人都應(yīng)該能夠獲得所需的信息。然而，缺點(diǎn)是這個; 下拉菜單可能需要更多努力才能完成。如果您有年度選擇定位，則可能包含數(shù)百年的輸入。國家選擇菜單也是如此。但是因為這個過程是眾所周知的，所以它也是最簡單的選擇。使用選擇菜單創(chuàng)建日期/時間輸入確實不會出錯。

您輸入所有常規(guī)數(shù)據(jù)，然后從預(yù)定的日期字段中進(jìn)行選擇。這與大多數(shù)表單略有不同，因為它需要在后端進(jìn)行額外的工作。每次加載此表單時，都需要與數(shù)據(jù)庫進(jìn)行核對，以查看哪些日期是免費(fèi)的，哪些時間未被其他會議聲明。如果您有這樣的動態(tài)網(wǎng)絡(luò)應(yīng)用程序，它將需要更多的工作，但您仍然可以通過下拉選擇菜單看到出色的結(jié)果。

2、格式化輸入字段

另一種更復(fù)雜的風(fēng)格是預(yù)先格式化的固定輸入字段。您將使用表示每個數(shù)據(jù)的文本輸入，而不是選擇元素，例如月，日，年和可能的時間（小時/分鐘）。

但是這種技術(shù)在JavaScript中運(yùn)行得更好，因此您可以構(gòu)建輸入。例如，您可以編寫一些JS代碼來將月和日輸入字段限制為僅兩位數(shù)。您可以更進(jìn)一步限制某些無意義的值，例如本月的數(shù)字99。您會注意到日期輸入，還有信用卡號碼和IP地址的空間。此技術(shù)適用于處理特定語法的任何有限值輸入。

例如，年/月/日將遵循4/2/2位的語法。當(dāng)用戶鍵入年份的第4個數(shù)字時，該字段可以自動選項卡以關(guān)注月份輸入。這樣，用戶就不會點(diǎn)擊“tab”來移動到下一個字段; 他們可以打數(shù)字并繼續(xù)前進(jìn)。如果你走這條路，你甚至可以使用HTML5新的日期輸入。

3、自動彈出日歷

這是最復(fù)雜的實施方式，但它在美學(xué)上也很令人愉悅，而且通常非常人性化。您可以使用一些基本的JavaScript / jQuery插件將完整的日歷界面添加到任何表單域。并非所有瀏覽器都完全支持這些，但大多數(shù)網(wǎng)絡(luò)用戶將獲得全部好處。這些日歷小部件有許多不同的大小和樣式，但它們都旨在實現(xiàn)一個目標(biāo)：簡單性。

他們的自定義日歷菜單跨越兩個月，使得在不久的將來選擇日期非常容易。它還有箭頭，因此用戶可以在幾個月之間移動并在將來檢查日期。移動用戶可能在使用此日歷時遇到問題，因此提供移動設(shè)備非常有用。但如果用戶擁有更大的屏幕并支持此功能，那么它絕對是最清晰的解決方案。

但請記住，即使彈出日歷具有令人難以置信的動態(tài)，它們也是最復(fù)雜的解決方案。如果您選擇此路線，請確保為無法使用彈出菜單的用戶提供替代方案。

4、移動UI支持

通常在移動設(shè)備上，支持日期選擇器是個好主意。這些使用Android和iOS上的原生滾動界面，因此它們易于使用。移動應(yīng)用程序默認(rèn)使用這些元素，并且所有智能手機(jī)都支持它們。但如果您有信心，可以嘗試自定義這些日期輸入代碼的樣式。雖然大多數(shù)用戶不關(guān)心設(shè)計，但它們很容易根據(jù)需要進(jìn)行更改和重新設(shè)計。他們只想要一個有效的日期選擇器。

對于移動日期選擇器，請始終使用本機(jī)解決方案。不要試圖重新發(fā)明輪子，因為用戶已經(jīng)知道這些界面是如何工作的。我更喜歡滾動滾動條界面，因為它在任何移動瀏覽器中都默認(rèn)工作。它還連接到任何選擇字段，因此您可以為移動用戶使用選擇菜單后備。只要每個用戶都能夠輸入時間/日期信息，細(xì)節(jié)和用戶體驗就可以進(jìn)行實驗。

5、最好的免費(fèi)插件

jQuery 的最佳日期選擇器插件，該列表包含許多用于不同目的的不同插件，我想分享用于更一般的Web設(shè)計項目的最佳選擇。如果我想構(gòu)建一個動態(tài)日期輸入字段，我最喜歡的插件是pickadate.js。這個免費(fèi)的開源項目在jQuery之上工作，并提供了大量不同的界面風(fēng)格。它主要用于日期選擇，但您也可以添加時間選擇器。這是一個非常簡單的插件實現(xiàn)，但您總是希望為無法從高級界面中受益的用戶提供后備。

如果您不喜歡默認(rèn)的移動體驗，可以隨時使用jQuery Mobile DateBox插件。它運(yùn)行在jQuery Mobile之上，jQuery Mobile是最流行的開源移動框架。它由JavaScript提供支持，jQuery背后的團(tuán)隊投入了大量精力來支持最廣泛的受眾。如果您正在尋找一個免費(fèi)的移動插件，那么jQM DateBox是一個很好的選擇。有些設(shè)計師想要一個非常簡單的解決方案，而Datepair完全符合這個要求。它可以適用于日期或時間，并為彈出菜單提供了幾種不同的選擇。

在網(wǎng)站設(shè)計中，無論哪種方式，這些趨勢都是普遍的，適用于所有網(wǎng)頁設(shè)計項目。無論您是在構(gòu)建記事頁面還是生日字段，本文都應(yīng)該幫助您設(shè)計一個可用且適合每個項目的界面。