網(wǎng)站設(shè)計(jì)

Website development

設(shè)計(jì)趨勢(shì)與資源:時(shí)間和日期輸入字段

發(fā)布時(shí)間：2017-01-04 09:46:09

從用戶處理數(shù)據(jù)信息始終是一個(gè)麻煩。有沒(méi)有一個(gè)好的方式去做，而信息往往太過(guò)笨重的創(chuàng)造一個(gè)干凈的輸入形式。

但是互聯(lián)網(wǎng)已經(jīng)走過(guò)了漫長(zhǎng)的道路，有很多辦法可以遵循。在這篇文章中，我想分享的處理時(shí)間/日期輸入字段的提示和資源。如果你遵循這些提示，你會(huì)更容易的制作日期字段，以及用戶體驗(yàn)，迎合了人們。

簡(jiǎn)單的下拉菜單

第一和明顯的選擇是每個(gè)字段的下拉菜單。這樣，你可以做一個(gè)月/日/年的選擇與個(gè)人選擇菜單的下拉菜單。

這有其利弊。大的好處是，每個(gè)人都知道如何使用下拉字段。這是一個(gè)原生的HTML元素，這是很常見(jiàn)的，每個(gè)人都應(yīng)該能夠得到所需要的信息。

然而，這是不利的；下拉菜單可以把更多的精力來(lái)完成。如果你有選擇目標(biāo)的一年，它可以包括輸入數(shù)百年。同一是真的國(guó)家選擇菜單

但由于這一過(guò)程是眾所周知的，它也是簡(jiǎn)單的選擇。你真的不會(huì)走錯(cuò)的創(chuàng)建日期/時(shí)間選擇菜單輸入。

massage envy calendar

上面的例子是一個(gè)在線調(diào)度頁(yè)按摩羨慕。你輸入的所有數(shù)據(jù)，然后選擇從預(yù)定的一場(chǎng)約會(huì)。

這是比大多數(shù)的形式有點(diǎn)不同，因?yàn)樗枰诤蠖说念~外工作。每一次加載窗體需要檢查數(shù)據(jù)庫(kù)看哪天是免費(fèi)的，哪次沒(méi)有被其他的約會(huì)要求。

如果你有一個(gè)動(dòng)態(tài)的web應(yīng)用程序一樣，它會(huì)花更多一點(diǎn)的工作，但你仍然可以看到下拉選擇菜單效果極佳。

格式化輸入字段

另一種風(fēng)格，復(fù)雜一點(diǎn)的是格式化的固定輸入字段。而不是一個(gè)選擇的元素，你可以使用一個(gè)文本輸入表示每個(gè)數(shù)據(jù)塊像一個(gè)月，一天，一年，甚至?xí)r間（小時(shí)/分鐘）。

但這種技術(shù)可以更好的JavaScript，所以你能夠結(jié)構(gòu)輸入。例如，你可以寫一些JS代碼限制月份和日期輸入字段只有兩位數(shù)。你可以限制某些價(jià)值沒(méi)有意義的，像數(shù)字99的月。

退房這段代碼看到一個(gè)簡(jiǎn)單而有效的例子。

tab date input fields

你會(huì)發(fā)現(xiàn)隨著日期的輸入，還有一個(gè)信用卡號(hào)碼的房間和一個(gè)IP地址。這種技術(shù)可以很好地用于任何有限值的輸入在一個(gè)特定的語(yǔ)法，工作。

例如，年/月/日將遵循語(yǔ)法的4 / 2 / 2位數(shù)。作為用戶類型今年的第四位，場(chǎng)均能自動(dòng)標(biāo)簽來(lái)關(guān)注月投入。這樣，用戶不點(diǎn)擊“標(biāo)簽”移動(dòng)到一個(gè)新的領(lǐng)域；他們可以沖數(shù)和保持運(yùn)動(dòng)。

如果你走這條路，你甚至可以使用數(shù)據(jù)輸入這是一個(gè)新的HTML5。

datetime input field

上面的例子顯示了一個(gè)日期的輸入字段的小瀏覽器bug。它已被解決，但演示是一個(gè)很好的例子，你可以做一點(diǎn)原始的HTML。

用戶可以手動(dòng)打卡的日期數(shù)，或者他們可以使用上/下箭頭循環(huán)通過(guò)他們的選擇。這是迅速成為一個(gè)受歡迎的選擇因?yàn)樾畔⒖梢酝ㄟ^(guò)后臺(tái)一個(gè)表單域，使開(kāi)發(fā)過(guò)程更簡(jiǎn)單。

彈出日歷

這是實(shí)現(xiàn)復(fù)雜的款式也很美觀，非常人性化。您可以添加完整的日歷界面的任何形式的領(lǐng)域使用一些基本的JavaScript和jQuery插件。

這不是在所有的瀏覽器完全支持但大多數(shù)互聯(lián)網(wǎng)用戶將得到的全部好處。這些日歷窗口有許多不同的大小和樣式，但他們的目的都是為了一個(gè)目標(biāo)：簡(jiǎn)單。

查看主頁(yè)Hipmunk盡量選擇出發(fā)和返回日期。

hipmunk calendar input

自定義日歷菜單跨越兩個(gè)月，使超容易選擇在不久的將來(lái)的某個(gè)日期。它也有箭，所以用戶可以移動(dòng)之間的月檢查日期到遙遠(yuǎn)的未來(lái)。

移動(dòng)用戶可以與日歷的麻煩，所以這是很好的提供一個(gè)移動(dòng)的替代。但是，如果用戶有一個(gè)更大的屏幕和支持這一功能，它絕對(duì)是清晰的解決方案。

american airlines calendar input

我會(huì)蓋一些日歷插件，晚一點(diǎn)在后，所以如果你正在尋找資源，跳到那一段。

但要記住，即使彈出日歷是非常動(dòng)態(tài)的，他們也是復(fù)雜的解決方案。如果你走這條路，一定要為那些不能與彈出菜單的用戶選擇工作。

手機(jī)UI支持

一般的手機(jī)，支持的是一個(gè)好主意日期選擇器。這些使用原生滾動(dòng)界面在Android和iOS使它們易于使用。移動(dòng)應(yīng)用程序使用這些元素的默認(rèn)和他們很好的支持，在所有智能手機(jī)。

但如果你感覺(jué)自信，你可以自定義這些日期輸入代碼風(fēng)格。他們很容易改變和重塑的需要，雖然大多數(shù)用戶不會(huì)關(guān)心設(shè)計(jì)。他們只是想要一個(gè)日期選擇器。

mobile calendar datepicker

當(dāng)談到移動(dòng)日期選擇器，總是與本地解決方案。不要試圖重新發(fā)明輪子，因?yàn)橛脩粢呀?jīng)知道這些接口的工作。

我喜歡滾動(dòng)代碼的接口，因?yàn)樗梢栽谌魏我苿?dòng)瀏覽器默認(rèn)。它也連接到任何選擇的領(lǐng)域你可以使用菜單選擇后退移動(dòng)用戶。

journal mobile app calendar

只要每一個(gè)用戶輸入的日期/時(shí)間信息的能力，細(xì)節(jié)和用戶體驗(yàn)進(jìn)行了實(shí)驗(yàn)。

好的免費(fèi)插件

在以前的文章中，我概述了日期選擇器插件jQuery。該名單包括用于不同的目的，不同的插件，我想好的選擇是更一般的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目。

datepicker js

如果我想建立一個(gè)動(dòng)態(tài)數(shù)據(jù)輸入字段，我喜歡的插件pickadate.js。這個(gè)免費(fèi)的開(kāi)放源代碼項(xiàng)目上jQuery和提供一系列不同的界面風(fēng)格。

它主要是由日期選擇，但你也可以添加一個(gè)時(shí)間選擇器太。這是一個(gè)很簡(jiǎn)單的插件來(lái)實(shí)現(xiàn)，但你永遠(yuǎn)要為那些不能從高級(jí)界面有利于用戶回退。

實(shí)施datebox

jqm datebox plugin

如果你不喜歡默認(rèn)的移動(dòng)體驗(yàn)，你總是可以用jQuery移動(dòng)工作DateBox插件。這是在頂部的jQuery移動(dòng)，這是流行的開(kāi)源移動(dòng)框架。

它的動(dòng)力由JavaScript和jQuery，在投入了大量的努力來(lái)支持廣泛的觀眾可能團(tuán)隊(duì)。如果你正在尋找移動(dòng)一個(gè)免費(fèi)的插件，然后datebox則是一個(gè)很好的選擇。

datepair.js

datepair js plugin

一些設(shè)計(jì)師想要一個(gè)很簡(jiǎn)單的解決辦法，并datepair完全符合該法案。它可以為日期或時(shí)間的工作，和它的幾個(gè)不同的彈出菜單選擇。

每當(dāng)用戶點(diǎn)擊關(guān)注一個(gè)輸入字段，他們會(huì)得到一個(gè)日期/時(shí)間上市小的彈出菜單。他們可以手動(dòng)輸入信息，或單擊“從彈出的選擇。（一個(gè)很好的選擇，簡(jiǎn)單的應(yīng)用程序。）

gldatepicker

gldate picker plugin

后，我想分享gldatepicker插件這是非常復(fù)雜的，它為用戶提供了在一個(gè)巨大的日歷界面點(diǎn)擊。

這個(gè)工作好在非常具體的項(xiàng)目里的日期信息是至關(guān)重要的。它是完全動(dòng)態(tài)的但也是實(shí)施適當(dāng)?shù)母鼜?fù)雜的插件之一。

沒(méi)有正確添加到您的網(wǎng)站選擇錯(cuò)Datepicker。不同的觀眾喜歡不同的特點(diǎn)，所以你總是可以運(yùn)行測(cè)試，看看有什么效果好。

無(wú)論如何，這些趨勢(shì)是普遍適用于所有網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目。你是否建立預(yù)約頁(yè)面或一個(gè)生日?qǐng)觯@篇文章可以幫助你設(shè)計(jì)一個(gè)接口的使用和適當(dāng)?shù)拿總€(gè)項(xiàng)目。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7021,0.html

上一篇：設(shè)計(jì)師最愛(ài)滾動(dòng)的最佳實(shí)踐

下一篇：要訪問(wèn)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理