Today I will teach you how to call the code in Axure to call the browser's date picker and filter the date range of the repeater table. The advantage of calling the browser date picker is that you can select a real date, including the day of the week in a certain month of a certain year, which February has 29 days...all are real, so different browser date picker styles There will be differences. In this case, Google Chrome is used, and Google is also standard with Axure. Other browsers do not have some plug-ins, or are afraid to preview Axure, so it is recommended that everyone also use Google.
1. Effect display
1. You can select the real date range. You can click the up and down arrows to switch to the previous month or the next month, or click the year and month to quickly select.
2. Automatically adjust the start time and end time according to the selection. For example, select the start time as August 30, 2023, and then select the end event as August 1, 2023. In this way, the start time is smaller than the end time, and it will be automatically recognized and adjusted to 2023. The period from August 1, 2023 to August 30, 2023
3. Click the query button to filter the repeater table and filter out the data in the date range.
【Prototype Preview】
https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=js date picker filter case
【Prototype download】
Method 1: After joining the prototype sharing group, you can share the prototype for free , please contact WeChat 522073109
Method 2: https://weidian.com/item.html?itemID=3681949369
2. Production tutorial
1. Call the browser’s date picker through js
First we need to create a new rectangle and name it (named code1 in the case), and then write the html code inside
We can use <input type="date"> to create a date input box. Because there are two dates for the start and end, we need to give it a name, such as name="vigo1". If you need to modify the style, you can also Add style directly inside, for example, width 200 and height 30 can be written as: style=”width: 200px; height: 30px;
Then we call it with JS,
First find the element whose "data-label" attribute is "code1" (which is the name we gave the rectangle above)
$(‘[data-label=code1]’).each(function()
And get the text content of the <p> tag inside the element (this is the code we called date above)
var paragraphText = $(this).find(‘p’).text();
Finally, replace the rectangle with the code content which is the date picker
$(this).html(paragraphText);
In this way, you can see a date picker in the preview, and then we copy one. It should be noted that the name and name of the second one cannot be the same as the first one. We need to modify it, otherwise it will conflict.
2. After selecting the date, transfer the value back to Axure
After the date picker appears, if a date is selected, we need to save the date value in Axure's global variable, otherwise we will not be able to filter the repeater. Here we need to add a text label first, which is hidden by default. Processing logic, named click1
First, we select the element with name="vigo1" and bind a "change" event handler function to it $("input[name='vigo1′]").on("change", function()
When the value of the date input box changes, the click1 function is triggered. The interaction when the mouse clicks
$(“[data-label=’click1′]”).trigger(“click”);
When the mouse clicks the click1 element, we will talk about the date selector selection.
var selectedDate = dateInput.value;
Set it as a global variable. Here we need to add a global variable time1 first, and then assign the selected date value to it.
$axure.setGlobalVariable(“time1”, selectedDate);
In this way, we save the date value in the global variable, and then return to Axure's native interaction.
The second date picker is handled in the same way. The main name cannot be the same. Basically, just copy and paste, and just change the name.
3. Processing and comparison of time values
Next, we add a text label, named Time Value 1, which is hidden by default and is only used for event comparison.
We use the interaction of setting text to set the event value recorded in the global variable to the text with time value 1. The obtained event format is yyyy-mm-dd, but to compare the time size in Axure, you need to use the date.parse function. The date format required by this function is yyyy/mm/dd.
So when setting text, we can use the replace function to replace the - symbol with /
Then we are using date.parse. This function can calculate the number of milliseconds between the specified time and 00:00:00 on January 1, 1970. It is equivalent to converting the characters in the date format into a pure numeric format, so that through comparison The size of the numbers can be compared with time.
The second date picker is handled in the same way, just copy and paste and change the name.
4. Processing and comparison of time values
After converting the two times into numerical values, we considered whether someone would choose the start time to be greater than the end time. For example, choose the start time as August 30, 2023, and then choose the end event as August 1, 2023. In fact, He wants to choose the range from August 1, 2023 to August 30, 2023, so we write an interaction to automatically adjust it.
We use several text labels to first record the initial x, y coordinate values of the two time rectangles. If it changes, we use the interaction of setting the text when loading to set the corresponding coordinate values.
The second date picker is handled in the same way
After selecting the time, it is judged according to the conditions. If the time value 1 is greater than 2, use the mobile interaction to move the date picker 1 to the coordinate value of record x1y1, and move the date picker 2 to the coordinate value of record x2y2
Otherwise, move date picker 1 to the coordinate value of record x2y2, and move date picker 2 to the coordinate value of record x1y1
This will automatically change the position
5. Preparation of repeater table
If there are several columns in the repeater, we will add a few rectangles. In the case, they are named tables 1 to 6, and the operation column.
Add corresponding columns to the repeater table and fill in the content
If it is axure10, just use the link interaction to connect the corresponding column to the corresponding component. If it is axure89, when loading each item of the repeater, you need to use the interaction of setting the text to set the value of the corresponding column of the table to On the corresponding component
Then use rectangles to make headers outside the repeater. Each rectangle has the same width as the rectangle of the corresponding column in the repeater.
The form will appear.
6. Filter the repeater table by date range
We add a query button. When the mouse clicks the query button, we add interaction based on conditions.
The first case is that if the values of time value 1 and time value 2 are both empty, that is, both have selected times, and time value 1 is less than time value 2, we will use filtered interaction to compare the repeater table time Column, in this case it is column 6 for filtering. Here we also need to use the date.prase function to process the time value of the sixth column, convert it to a standard digital format, and then compare it with time values 1 and 2. The condition here is that it must be greater than or equal to Time 1, and less than time value 2
The second case is that if the values of time value 1 and time value 2 are both empty, that is, both have selected times, and time value 1 is greater than or equal to time value 2 (here, time value 1 goes to the right and becomes the end time ), we use the filtering interaction to filter the time column of the repeater table, in this case the 6th column. Here we also use the date.prase function to process the time value of the 6th column and convert it to a standard digital format. , and then compare it with time values 1 and 2. The condition here is that it must be greater than or equal to time 2 and less than time value 1.
The third case is that if the values of time value 1 and time value 2 are both empty, that is, no time is selected, we can use the interaction of removing the filter to remove the filter.
The fourth case is that if time value 1 is empty, time value 2 is not empty, and time value 1 is to the left of time value 2, only the end time is selected. We use the filtering interaction to filter the time column of the repeater table, in this case the 6th column. Here we also use the date.prase function to process the time value of the 6th column, convert it to a standard digital format, and then Compared with time 2, the condition here is less than time value 2
The fifth case is that if time value 1 is empty, time value 2 is not empty, and time value 1 is to the right of time value 2, that is, only the end time is selected, but the end time is on the right. We use the filtering interaction to filter the time column of the repeater table, in this case the 6th column. Here we also use the date.prase function to process the time value of the 6th column, convert it to a standard digital format, and then Compared with time 1, the condition here is less than time value 1
The sixth case is that if time value 2 is empty, time value 1 is not empty, and time value 1 is to the left of time value 2, only the start time is selected. We use the filtering interaction to filter the time column of the repeater table, in this case the 6th column. Here we also use the date.prase function to process the time value of the 6th column, convert it to a standard digital format, and then Compared with time 1, the condition here is greater than or equal to time value 1
The last situation is that if time value 2 is empty, time value 1 is not empty, and time value 1 is to the right of time value 2, that is, only the end time is selected, but the end time is recorded with time value 1. We use the filtering interaction to filter the time column of the repeater table, in this case the 6th column. Here we also use the date.prase function to process the time value of the 6th column, convert it to a standard digital format, and then Compared with time 1, the condition here is less than or equal to time value 1
In this way, we have completed the production of calling the browser date picker and filtering the repeater form prototype template. It is also very convenient to use later. You only need to fill in the corresponding data in the repeater form to automatically generate the date interval filter. interactive effect
The above is the entire content of this tutorial. Interested students can try it. Thank you for reading. See you in the next issue.