大家在日常的原型繪制中經(jīng)常會(huì)使用到日期選擇器，包括在設(shè)置生日、設(shè)置收發(fā)貨時(shí)間、設(shè)置配送時(shí)間等等業(yè)務(wù)場(chǎng)景都會(huì)遇到使用日期選擇器，那么如何繪制日期選擇器呢？
文章插圖
一、功能分析這里由于原型基本只是給研發(fā)/UI人員說明相關(guān)的功能，在這里就不做特別復(fù)雜的交互了，比如切換不同的月份展示正確的對(duì)應(yīng)天數(shù)與星期，畢竟要使用axure實(shí)現(xiàn)完整的日期選擇器功能還是比較復(fù)雜的，這里實(shí)現(xiàn)的功能主要是
①點(diǎn)擊年的前后切換鍵，實(shí)現(xiàn)年的加減
②點(diǎn)擊月的前后切換鍵，實(shí)現(xiàn)月的加減
③點(diǎn)擊日期，將當(dāng)前選擇的年月日賦值到輸入框
文章插圖
二、原型繪制1.首先繪制日期輸入框由于axure自帶的元件庫中的輸入框邊框比較丑 ， 所以咱們自己定義一個(gè)背景 ， 先拖入一個(gè)矩形，作為輸入框的背景，寬高設(shè)置為250*40，邊框設(shè)置自己喜歡的顏色即可
文章插圖
拖入文本框元件，寬高定義為205*30 ， 然后移動(dòng)至合適的位置 ， 并設(shè)置默認(rèn)的提示文字，隱藏原有的邊框 。不要忘了命名其為輸入框，方便后續(xù)選中時(shí)為其賦值 。
文章插圖
2.制作日期選擇器①首先繪制頂部的年月選擇功能，即下圖所示部分
文章插圖
大家可以提現(xiàn)到iconfont下載對(duì)應(yīng)的四個(gè)圖標(biāo)，當(dāng)然也可以自己使用axure繪制 。首先拖入一個(gè)矩形，定義寬高為250*40，背景顏色自己定義即可 ， 然后將提前下載好的圖標(biāo)拖至合適的位置，并新增年和月的文本標(biāo)簽元件，用于展示年月后的文本展示
文章插圖
②為切換年月的按鈕添加交互事件
為前年的按鈕添加交互鼠標(biāo)單擊時(shí)的交互事件，即當(dāng)點(diǎn)擊前年時(shí)，年自動(dòng)減一
文章插圖
同理為明年、上月、下月的按鈕分別添加對(duì)應(yīng)的增減年和月的交互事件
【axure日期選擇器控件 axure時(shí)間選擇框】③繪制選擇天的界面
文章插圖
在這里我們使用表格元件，繪制一個(gè)6*7的表格 ， 樣式的話可以把表格的分割線去掉，然后按照上圖輸入對(duì)應(yīng)的年月日，這里就不輸入上個(gè)月和下個(gè)月的日期了
文章插圖
首先我們需要標(biāo)識(shí)出系統(tǒng)當(dāng)前的日期，即20日 ， 我們可以把20號(hào)加粗并使用顏色進(jìn)行區(qū)分
文章插圖
將年月日的選擇元件選中后轉(zhuǎn)化為動(dòng)態(tài)面板，并命名為日期選擇器
文章插圖
④添加選擇天時(shí)的交互事件
先選中1號(hào) ， 大家如果想添加鼠標(biāo)懸停樣式或者選中樣式可以自己編輯 ， 我這里就不給大家設(shè)置了 ， 添加鼠標(biāo)單機(jī)時(shí)的交互事件，為輸入框直接賦值當(dāng)前記錄的年月日；并設(shè)置單擊時(shí)，隱藏日期選擇器
文章插圖
復(fù)制該交互事件，粘貼到所有的單單元格上
文章插圖
并設(shè)置日期選擇器默認(rèn)為隱藏
文章插圖
⑤設(shè)置輸入框的交互事件
當(dāng)鼠標(biāo)單擊時(shí) ， 顯示日期選擇器
文章插圖
下載一個(gè)日歷的小圖標(biāo)放在上邊美化一下
文章插圖
到這里為止，日期選擇器就繪制完畢了，樣式如果大家覺得不好看的話，大家可以自己添加就可以 。
三、效果展示
文章插圖
以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：- 如何使用易語言顏色選擇器子程序下的如果命令
- 用VB實(shí)現(xiàn)日期倒計(jì)時(shí)功能的步驟
- 如何在AxureRP中設(shè)置字號(hào)大小
- 如何在易語言農(nóng)歷日期框下新建全局變量
- Axure教程：如何高效創(chuàng)建個(gè)性化元件庫
- 如何在Axure RP8中指定單元格下方插入行
- 如何在WPS中快速插入日期
- 如何設(shè)置Windows中的其他日期、時(shí)間和區(qū)域？
- 2024年9月屬兔最佳喬遷日期,屬兔的2024年9月適合搬家的日子
- 如何在WPS表格中快速填充日期中月份的最后一天