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

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

一、效果展示

1、可以選擇真實的日期區間，可以點擊上下箭頭切換上月或下月，或者點擊年月快速選擇。

2、根據選擇自動調整開始時間和結束時間，例如選擇開始時間為2023年8月30日，再選擇結束事件為2023年8月1日，這樣開始時間小于結束時間，就會自動識別調整為2023年8月1日至2023年8月30日的區間

3、點擊查詢按鈕，可以對中繼器表格進行篩選，篩選出在日期區間里面的數據。

原型地址：https://474xip.axshare.com/#g=1

二、制作教程

1. 通過js調用瀏覽器的日期選擇器

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

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

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

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

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

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

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

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

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

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

鼠標單擊click1元件時，我們就講日期選擇器選擇的時，var selectedDate = dateInput.value；

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

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

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

3. 時間值的處理和比較

接下來我們在增加一個文本標簽，命名為時間值1，默認隱藏，只用于事件的比較。

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

所以在設置文本的時候，我們可以用replace函數將-符號替換成/

然后我們在用date.parse，這個函數可以計算指定時間和1970年1月1日00:00:00之間相差的毫秒數，相當于將日期格式的字符轉為純數字的格式，這樣通過比較數字的大小就可以比較時間了。

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

4. 時間值的處理和比較

將兩個時間轉為數值之后，我們考慮到，會不會有人選擇開始時間大于結束時間，例如選擇開始時間為2023年8月30日，再選擇結束事件為2023年8月1日，實際上他是想選擇2023年8月1日至2023年8月30日的區間，所以我們寫個交互將他自動調整過來。

我們用幾個文本標簽先記錄兩個時間矩形初始的x，y坐標值，如果會發生變化，我們在在載入時用設置文本的交互，設置對應的坐標值。

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

選擇時間之后根據條件來判斷，如果時間值1大于二，就用移動的交互，將日期選擇器1移動到記錄x1y1的坐標，將日期選擇器2移動到記錄x2y2的坐標值里。

否則，就將日期選擇器1移動到記錄x2y2的坐標，將日期選擇器2移動到記錄x1y1的坐標值里。

這樣就可以自動換位了。

5. 中繼器表格的制作

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

在中繼器表格里增加對應的列，并填寫好內容。

如果是axure10的話，用鏈接的交互，將對應列連接到對應元件就可以了，如果是axure89的話，在中繼器每項加載時就要用設置文本的交互，將表格對應列的值設置到對應元件上。

然后在中繼器外面用矩形制作表頭，每個矩形和中繼器里對應列的矩形寬度一樣。

這樣表格就出來了。

6. 對中繼器表格進行日期區間的篩選

我們增加一個查詢按鈕，鼠標單擊查詢按鈕時，我們按條件增加交互。

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

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

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

第4種情況是，如果時間值1為空，時間值2不為空，并且時間值1在時間值2的左側，就是只選擇了結束時間。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間2比較，這里條件是小于時間值2。

第5種情況是，如果時間值1為空，時間值2不為空，并且時間值1在時間值2的右側，就是只選擇了結束時間，但是結束時間是在右側。我們就用是篩選的交互，對中繼器表格時間列，案例里是第6列進行篩選，這里我們同樣要用date.prase函數對第六列的時間值處理，轉為標準數字格式，再和時間1比較，這里條件是小于時間值1。

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

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

這樣我們就完成了調用瀏覽器日期選擇器并篩選中繼器表格原型模板的制作了，后續使用也很方便，只需要在中繼器表格里填寫對應的數據，即可自動生成日期區間篩選的交互效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。