言：mm再也不用擔心我找不到合適好看的日期選擇插件了，今天分享三款純jquery移動端日期時間選擇插件，趕緊點贊收藏轉發吧。

一、jQuery移動端觸屏滑動時間日期選擇插件

簡介：jQuery移動端觸屏滑動時間日期選擇插件，點擊文本框觸發時間選擇控件，默認選擇當前日期，選好的以紅色顯示。

js代碼：

<script> 
   //選擇 YYYY-MM-dd 格式的調用： 
   $.selectYY_MM_DD("#select_0"); 
 
   $('.title').html('選擇起始時間') 
//    $(function () { 
//             var currYear = (new Date()).getFullYear();    
//             var opt={}; 
//             opt.date = {preset : 'date'}; 
//             opt.default = { 
//                 theme: 'android-ics light', //皮膚樣式 
//                 display: 'modal', //顯示方式  
//                 mode: 'scroller', //日期選擇模式 
//                 lang:'zh', 
//                 startYear:currYear-10, //開始年份 
//                 endYear:currYear + 10 //結束年份 
//             }; 
              
//             $("#start_kdsj").val('').scroller($.extend(opt['date'], opt['default'])); 
//             $("#end_kdsj").val('').scroller($.extend(opt['date'], opt['default'])); 
//         }); 
</script> 
<script> 
    $.selectYY_MM_DD("#select_1"); 
 
           var myDate = new Date; 
            var year = myDate.getFullYear(); //獲取當前年 
            var mon = myDate.getMonth() + 1; //獲取當前月 
            var date = myDate.getDate(); //獲取當前日 
            console.log(year,mon,date) 
</script>

二：簡單的jQuery移動端日期時間選擇插件

簡介：一款簡單的jQuery手機移動端日期時間選擇插件，點擊輸入框遮罩彈出日期時間選擇器，手機觸屏滑動分別選擇年、月、日、時、分。

js代碼：

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.date.js"></script> 
<script type="text/javascript"> 
$.date('#date3'); 
</script>

三：datePicker簡單的手機移動端日期選擇插件

簡介：datePicker是一款非常簡單易用的手機移動端日期選擇插件，點擊輸入框觸發彈出年月日滑動選擇控件。

js代碼：

<script src="datePicker.js"></script> 
    <script> 
    var calendar = new datePicker(); 
calendar.init({ 
    'trigger': '#demo1', /*按鈕選擇器，用于觸發彈出插件*/ 
    'type': 'date',/*模式：date日期；datetime日期時間；time時間；ym年月；*/ 
    'minDate':'1900-1-1',/*最小日期*/ 
    'maxDate':'2100-12-31',/*最大日期*/ 
    'onSubmit':function(){/*確認時觸發事件*/ 
        var theSelectData=calendar.value; 
    }, 
    'onClose':function(){/*取消時觸發事件*/ 
    } 
}); 
     
    </script>

以上是為大家分享的三款純jquery移動端日期時間選擇插件，有需要以上代碼的可以在下方給我留言。

我是小程序軟件開發，每天分享開發過程中遇到的知識點，如果對你有幫助的話，幫忙點個贊再走唄，非常感謝。

往期文章分享：

程序員搞笑的段子，總有一條戳中你的笑點

微信小程序editor富文本編輯器的使用，拿走不謝

傳統的時間選擇，早已不能滿足現代的體驗和需求，在HTML5里早已經有一套很成熟的原生時間選擇控件，在體驗上更佳，尤其是手機端，會直接調用系統級的時間組件。

<input type="date" />

<input type="time" />

<input type="month" />

<input type="week" />

<input type="datetime-local" />

輯導讀：前段時間， iOS14 升級了。蘋果的每一次升級都會引起人們的廣泛關注，畢竟它代表著行業標桿。本文作者在使用的過程中，對iOS14 中「時間控件」的設計產生了疑問，并從三個方面展開分析，提出自己的一點思考，與你分享。

前幾天升級 iOS14 后在「日歷APP」中遇到個「時間控件」使用體驗問題，在朋友圈「吐了個槽」后收到很多類似反饋，后來在使用「提醒事項APP」中發現有個類似「時間控件」，體驗下來感覺挺順溜，于是想做個對比分析看看區別。

防杠說明1：接下來聊的體驗純我的「主觀感受」，對比分析也是基于過往的經驗來聊，沒有數據也沒有其他支撐，交流為主，無他意求放過。

防杠說明2：蘋果在「日歷APP」和「提醒事項APP」這 2 個 APP 設計一定有考慮過，文章純粹從外部視角去聊體驗感受，不聊 APP 的場景&戰略&定位。

一、iOS14 的「時間控件」長什么樣

iOS14 「日歷APP」新建日程&點擊展開「時間控件」后的狀態

先介紹下「時間控件」長什么樣，上圖左邊是「日歷APP」中「新建日程」界面，點擊「開始-時間」后就展開了「時間控件」，控件中分別有這5個功能：時鐘控件（鍵盤+觸摸）、年月控件、快捷切換月份控件、日歷控件、時區功能，「提醒事項APP」的「時間控件」界面基本差不多，具體差異會在在對比中展示。

二、開始做3個角度對比

對比1：日歷間距處理

整體來看「時間控件」中的「日歷」是問題最大影響體驗最大的地方，「日歷」中的日期和日期之間的距離是大過日期和左右屏幕的距離，這會導致日歷看起來比較散不是一個整體，見下圖中黃色標記和藍色標記。

這類型的問題屬于「格式塔理論」中的「Law of Proximity接近法則」，間距沒有起到把相關元素粘起來的作用，相反把元素拆散，有種信息量很多密密麻麻的感受。

「日歷APP」中日期之間間距和屏幕間距對比

具體「Law of Proximity 接近法則」的意思是：相互接近的事物被認為比相隔較遠的事物更加相關。

格式塔理論中的接近法則示意圖

這里密密麻麻的感受還有另一個理論基礎「米勒定律」，因為人同時處理信息大約是「7±2」條信息，當信息量超出這個數量后出現，本能上一定是先排斥的，大家回想下如果你要填寫一個復雜表單時候的場景，就是這樣的感覺。

米勒定律的示意圖

我們對比下「提醒事項APP」中的日歷選擇，間距處理保證了日期距離是比外面小的，日歷看起來就是一個整體可操作的控件狀態，如果拿「格式塔理論」和「米勒定律」來看的話都是在合理范圍內，事實感受也是這樣

「日歷APP」和「提醒事項APP」日歷進行對比

對比2：上下層級關系處理

「時間控件」是通過點擊展開的，如果這個簡單控件，僅展開動效足以讓用戶理解，只是這「時間控件」中包含5個功能占了 1/2 的屏幕，動效解決不了，加上「對比1」的日歷間距問題，信息量巨大且復雜。控件里面除了標題做了「文字加粗」處理去表現層級，在「上下銜接 or 左右遞進 or 背景顏色」都沒做很多工作。

和上一級樣式是在太接近，沒有能明顯區分開，和上一層級融合到一起后，界面看起來從一行行就變成點擊后一下子增加「爆發式」的信息出現，觀感復雜+信息量變大。如果處理合適「理想中的層級關系」應該是圖片右邊這樣的，用戶一眼看到的是一塊塊而不是一個個。

日歷APP 時間控件展開后感覺是「碎裂」，理想應該右側這樣塊狀的層級結構展開。

再來對比「提醒事項APP」中的層級關系，整個「時間控件」左右都有縮進，左上和上一級的銜接處分割線也做了處理，加上上一級日期標題前有個「日歷ICON」，很自然在視覺上就出現了上下層級關系出現，內容一樣看起來清晰簡潔很多。

「提醒事項APP」中用縮進和風格線去表現層級關系

對比3：頁面布局上的對比

再把視角放到頁面布局中，「日歷APP」采用的是邊到邊布局（Edge to Edge）方式，「提醒事項APP」采用的是卡片式布局（Card）方式。

在 iOS 系統中「邊到邊布局」是從 iOS7 后蘋果開始采用的方式，優勢是把極大增加了屏幕空間利用率，可顯示內容增加，當時主打機型是 4 英寸屏 的iPhone5s，，屏幕空間有限。

iOS6 和 iOS7 設置界面的對比

從圖片中里面是不是感覺 iOS6 也有點卡片式布局的意思，其實大家當時對 iOS6 印象還是「擬物化」，這里也就不展開了。

「卡片式布局」是被 Google 推崇起來的，當時有款產品叫「Google Now」（現在已經下線），這個產品可以語音互動&主動提醒（飛機、路況、比賽比分、突發新聞等等）信息內容給到你，包含的信息內容多樣且復雜，用了卡片設計去解決了信息多而不亂的問題，信息和信息之間互不受到影響。

GoogleNow 主界面，卡片設計為主

「Google Now」產品已經下線，找了個介紹視頻（https://v.qq.com/x/page/f03052ojg4u.html），大家可以注意里面不同場景下的卡片的布局都是不同的，也方便未來的擴展。

回到這兩個頁面布局對比中，不過不展開「時間控件」這樣對比來看兩邊布局并沒有很大的問題，具體看是要更多「包容」還是要「屏效」。

不過這里我們對比的是「時間控件」，這部分看來「卡片式布局」是更合適的，布局能包容不同復雜的信息，塊和塊&功能和功能之間是更加清楚，不會引起混亂。

現在很多產品也都在考慮「卡片式布局」，像「手機淘寶」這兩年基本上已經完全改造成「卡片式布局」，我理解是因為手淘信息流復雜&個性，照片和元素的出現都不是固定的，用卡片作為「容器」去包容「內容」，讓界面有秩序。

但這里還是要提一嘴信息流不要「無腦」追「卡片式布局」是最好，比如媒體為場景的APP，顯然「邊到邊布局」顯然更合適，比如 Instagram ，要給照片以更多的展示空間，也比如電商中對商品品質有信心的，那也適合「邊到邊布局」，比如 SNKRS，對球鞋品質表現的更加到位。

先理解再去設計「適合自家產品」的風格是個挺重要的事，畢竟一個產品風格會用很久，改動成本很高。

三、最后總結一下

真的是抱著「心驚膽戰」的心情去做的對比，蘋果設計一直都是行業標桿，這次是想趁聊對比時「拋磚引玉」聊聊「界面細節是如何決定設計品質」，這些東西非常小，合作上下游也不一定在意，覺得差不多就好。現在產品迭代速度飛快，留給設計師的時間也不多，怎么樣能夠快速有效地把細節處理好，是一個值得長期討論的話題。

最后抽取一些文章中的「關鍵詞」做個總結：

• 間距控制：有些設計師出稿或工程師開發&驗收時會忽略「間距」的價值，其實「間距」對設計品質影響非常大，背后設計理論支撐是「格式塔理論」，如果對「間距」不敏感，那要多練習練習去找好的產品設計去觀察和感受。
• 米勒定律：很多人看界面覺得亂，為什么感覺亂背后可以通過「米勒定律」做設計理論支撐，人在同一時間處理信息程度是「7±2」個，數量越多越亂。
• 層級關系：表單或復雜頁面中的界面需要把層級關系表現到位，不然界面會亂七八糟，在 iOS11 時候蘋果已經注意到這一點并且已經提倡過，閱讀了解「iOS11 設計理念和 3 個設計方向」。
• 邊到邊布局：一種屏幕效率利用高的界面布局，在iOS7 開始后被使用
• 卡片式布局：一種能夠把復雜信息有序融合在一起的布局，更多包容和擴展

好了，今天和大家就嘮叨到這。

作者：icojump，微信公眾號：邊設計邊管理

本文由 @icojump 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議