本文就如何在Axure里怎么調(diào)用代碼調(diào)用瀏覽器的日期選擇器并對(duì)中繼器表格進(jìn)行日期區(qū)間的篩選進(jìn)行分析，希望對(duì)你有所幫助。

今天教大家在Axure里怎么調(diào)用代碼調(diào)用瀏覽器的日期選擇器并對(duì)中繼器表格進(jìn)行日期區(qū)間的篩選。調(diào)用瀏覽器日期選擇器的好處是，可以選擇真實(shí)的日期，包括某年某月某日是星期幾，哪個(gè)二月是29天……都是真實(shí)的，那不同的瀏覽器日期選擇器的樣式會(huì)有所區(qū)別，本案例是用谷歌瀏覽器，而且谷歌也是和Axure標(biāo)配的，別人瀏覽器有些插件沒有，或者預(yù)覽Axure時(shí)有些不敢，所以建議大家也是使用谷歌。

一、效果展示

1、可以選擇真實(shí)的日期區(qū)間，可以點(diǎn)擊上下箭頭切換上月或下月，或者點(diǎn)擊年月快速選擇。

2、根據(jù)選擇自動(dòng)調(diào)整開始時(shí)間和結(jié)束時(shí)間，例如選擇開始時(shí)間為2023年8月30日，再選擇結(jié)束事件為2023年8月1日，這樣開始時(shí)間小于結(jié)束時(shí)間，就會(huì)自動(dòng)識(shí)別調(diào)整為2023年8月1日至2023年8月30日的區(qū)間

3、點(diǎn)擊查詢按鈕，可以對(duì)中繼器表格進(jìn)行篩選，篩選出在日期區(qū)間里面的數(shù)據(jù)。

二、制作教程

1. 通過js調(diào)用瀏覽器的日期選擇器

首先我們要新建一個(gè)矩形并命名（案例中命名為code1），然后在里面寫html代碼。

我們用<input type=”date”>可以創(chuàng)建一個(gè)日期輸入框，因?yàn)殚_始和結(jié)束有兩個(gè)日期，所以我們要給他命個(gè)名，例如name=”vigo1″，如果需要修改樣式的話，也可以直接在里面增加style，例如寬200，高30可以寫成：style=”width: 200px; height: 30px；

然后我們用JS調(diào)用它，首先找到 “data-label” 屬性為 “code1” 的元素（就是我們上面給矩形的命名）$(‘[data-label=code1]’).each(function()

并獲取元素內(nèi)部 <p> 標(biāo)簽的文本內(nèi)容（就是我們上面調(diào)用date的代碼）var paragraphText = $(this).find(‘p’).text()；

最后將矩形替換為代碼內(nèi)容就是日期選擇器$(this).html(paragraphText)；

這樣就在預(yù)覽時(shí)就可以看到一個(gè)日期選擇器了，然后我們復(fù)制一個(gè)，需要注意的是第二個(gè)的名稱和name不能和第一個(gè)一致，我們需要修改一下，不然就會(huì)沖突了。

2. 選擇日期之后將值傳回到Axure里

出現(xiàn)日期選擇器后，如果選擇了日期，我們需要將里面的日期值保存的Axure的全局變量里，不然后續(xù)無法對(duì)中繼器進(jìn)行篩選，這里我們要先增加一個(gè)文本標(biāo)簽，默認(rèn)隱藏，用于處理邏輯，命名為click1。

首先，我們選擇name= “vigo1” 的元素，并為其綁定一個(gè) “change” 事件處理函數(shù) $(“input[name=’vigo1′]”).on(“change”, function()。

當(dāng)日期輸入框的值發(fā)生變化時(shí)，觸發(fā)click1函數(shù)鼠標(biāo)單擊時(shí)的交互$(“[data-label=’click1′]”).trigger(“click”)；

鼠標(biāo)單擊click1元件時(shí)，我們就講日期選擇器選擇的時(shí)，var selectedDate = dateInput.value；

設(shè)置為全局變量，這里我們要先增加一個(gè)全局變量time1，然后講選擇的日期值賦給它，$axure.setGlobalVariable(“time1”, selectedDate)；

這樣我們就將日期值保存到全局變量里面了，后面的就回歸到axure的原生交互。

第二個(gè)日期選擇器也是同樣方式處理，主要名稱不能一樣，基本就是復(fù)制粘貼，改個(gè)名就可以了。

3. 時(shí)間值的處理和比較

接下來我們?cè)谠黾右粋€(gè)文本標(biāo)簽，命名為時(shí)間值1，默認(rèn)隱藏，只用于事件的比較。

我們用設(shè)置文本的交互，將全局變量里記錄的事件值設(shè)置時(shí)間值1的文本里。獲取到的事件格式是yyyy-mm-dd，但是axure里要比較時(shí)間大小需要用date.parse函數(shù)，這個(gè)函數(shù)需要的日期格式為yyyy/mm/dd。

所以在設(shè)置文本的時(shí)候，我們可以用replace函數(shù)將-符號(hào)替換成/

然后我們?cè)谟胐ate.parse，這個(gè)函數(shù)可以計(jì)算指定時(shí)間和1970年1月1日00:00:00之間相差的毫秒數(shù)，相當(dāng)于將日期格式的字符轉(zhuǎn)為純數(shù)字的格式，這樣通過比較數(shù)字的大小就可以比較時(shí)間了。

第二個(gè)日期選擇器也是同樣方式處理，復(fù)制粘貼，改個(gè)名就可以了。

4. 時(shí)間值的處理和比較

將兩個(gè)時(shí)間轉(zhuǎn)為數(shù)值之后，我們考慮到，會(huì)不會(huì)有人選擇開始時(shí)間大于結(jié)束時(shí)間，例如選擇開始時(shí)間為2023年8月30日，再選擇結(jié)束事件為2023年8月1日，實(shí)際上他是想選擇2023年8月1日至2023年8月30日的區(qū)間，所以我們寫個(gè)交互將他自動(dòng)調(diào)整過來。

我們用幾個(gè)文本標(biāo)簽先記錄兩個(gè)時(shí)間矩形初始的x，y坐標(biāo)值，如果會(huì)發(fā)生變化，我們?cè)谠谳d入時(shí)用設(shè)置文本的交互，設(shè)置對(duì)應(yīng)的坐標(biāo)值。

第二個(gè)日期選擇器也是同樣方式處理。

選擇時(shí)間之后根據(jù)條件來判斷，如果時(shí)間值1大于二，就用移動(dòng)的交互，將日期選擇器1移動(dòng)到記錄x1y1的坐標(biāo)，將日期選擇器2移動(dòng)到記錄x2y2的坐標(biāo)值里。

否則，就將日期選擇器1移動(dòng)到記錄x2y2的坐標(biāo)，將日期選擇器2移動(dòng)到記錄x1y1的坐標(biāo)值里。

這樣就可以自動(dòng)換位了。

5. 中繼器表格的制作

中繼器里有幾列我們就增加幾個(gè)矩形，案例中分別命名為表1~6，以及操作列。

在中繼器表格里增加對(duì)應(yīng)的列，并填寫好內(nèi)容。

如果是axure10的話，用鏈接的交互，將對(duì)應(yīng)列連接到對(duì)應(yīng)元件就可以了，如果是axure89的話，在中繼器每項(xiàng)加載時(shí)就要用設(shè)置文本的交互，將表格對(duì)應(yīng)列的值設(shè)置到對(duì)應(yīng)元件上。

然后在中繼器外面用矩形制作表頭，每個(gè)矩形和中繼器里對(duì)應(yīng)列的矩形寬度一樣。

這樣表格就出來了。

6. 對(duì)中繼器表格進(jìn)行日期區(qū)間的篩選

我們?cè)黾右粋€(gè)查詢按鈕，鼠標(biāo)單擊查詢按鈕時(shí)，我們按條件增加交互。

第一種情況是，如果時(shí)間值1和時(shí)間值2的值都不為空，就是都有選時(shí)間，并且時(shí)間值1小于時(shí)間值2，我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間值1和2比較，這里條件是要大于等于時(shí)間1，并且小于時(shí)間值2。

第2種情況是，如果時(shí)間值1和時(shí)間值2的值都不為空，就是都有選時(shí)間，并且時(shí)間值1大于等于時(shí)間值2（這里就是時(shí)間值1去到右邊變成結(jié)束時(shí)間了），我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間值1和2比較，這里條件是要大于等于時(shí)間2，并且小于時(shí)間值1。

第3種情況是，如果時(shí)間值1和時(shí)間值2的值都為空，就是都沒有選時(shí)間，我們就用移除篩選的交互，將篩選移除即可。

第4種情況是，如果時(shí)間值1為空，時(shí)間值2不為空，并且時(shí)間值1在時(shí)間值2的左側(cè)，就是只選擇了結(jié)束時(shí)間。我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間2比較，這里條件是小于時(shí)間值2。

第5種情況是，如果時(shí)間值1為空，時(shí)間值2不為空，并且時(shí)間值1在時(shí)間值2的右側(cè)，就是只選擇了結(jié)束時(shí)間，但是結(jié)束時(shí)間是在右側(cè)。我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間1比較，這里條件是小于時(shí)間值1。

第6種情況是，如果時(shí)間值2為空，時(shí)間值1不為空，并且時(shí)間值1在時(shí)間值2的左側(cè)，就是只選擇了開始時(shí)間。我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間1比較，這里條件是大于等于時(shí)間值1。

最后一種情況是，如果時(shí)間值2為空，時(shí)間值1不為空，并且時(shí)間值1在時(shí)間值2的右側(cè)，就是只選擇了結(jié)束時(shí)間，但結(jié)束時(shí)間是時(shí)間值1記錄的。我們就用是篩選的交互，對(duì)中繼器表格時(shí)間列，案例里是第6列進(jìn)行篩選，這里我們同樣要用date.prase函數(shù)對(duì)第六列的時(shí)間值處理，轉(zhuǎn)為標(biāo)準(zhǔn)數(shù)字格式，再和時(shí)間1比較，這里條件是小于等于時(shí)間值1。

這樣我們就完成了調(diào)用瀏覽器日期選擇器并篩選中繼器表格原型模板的制作了，后續(xù)使用也很方便，只需要在中繼器表格里填寫對(duì)應(yīng)的數(shù)據(jù)，即可自動(dòng)生成日期區(qū)間篩選的交互效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。