Date range selection method and date range selector of mobile terminal

Abstract

The invention provides a date range selection method of a mobile terminal and a date range selector, and belongs to the technical field of computers.The method comprises the steps that a current month is selected in response to month selection operation of a user, and a date interface of the current month is loaded; the date interface comprises all dates of the current month; determining a starting date and an ending date in response to a date selection operation of a user on the date interface; and determining a selected date range according to the starting date and the ending date so as to carry out style rendering on dates in the date range. According to the date range selection method of the mobile terminal and the date range selector, a single-month display mode is adopted, the data volume loaded each time is reduced, the page loading speed and the page response speed are improved, the performance and the user experience are improved, the flexibility and the functionality are improved, and the user experience is improved. And the user can select the date more efficiently and conveniently at the mobile terminal.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a date range selection method and a date range selector for a mobile terminal. Background Art

[0002] The date range selector is a commonly used form component on the client side. On the desktop side, since there is no screen size limit, the dates of multiple months can be displayed at the same time to facilitate users to make quick selections. However, on the mobile side, due to the limitation of screen size, only one month's dates can be displayed on one screen.

[0003] Common UI component libraries on the market now use the up and down scrolling method to cram multiple months of calendars into a list to speed up the selection process. Once the date selection range becomes larger, this method will cause too many entities to be rendered, resulting in lag. Summary of the invention

[0004] The present invention provides a date range selection method and a date range selector for a mobile terminal, which are used to solve the defect in the prior art that too many entities are rendered and thus cause freezes.

[0005] In a first aspect, the present invention provides a date range selection method for a mobile terminal, which is applied to a mobile terminal and includes: selecting the current month in response to a user's month selection operation, and loading a date interface of the current month; the date interface includes all dates of the current month; determining a start date and an end date in response to a user's date selection operation on the date interface; determining a selected date range based on the start date and the end date, so as to perform style rendering on the dates within the date range.

[0006] According to the date range selection method of the mobile terminal provided by the present invention, in response to the date selection operation of the user on the date interface, the start date and the end date are determined, including: selecting a first date in response to the first click operation of the user on the date interface, and assigning the value of the first date to a first variable; selecting a second date in response to the second click operation of the user on the date interface, and assigning the value of the second date to a second variable; when the second variable is later than the first variable, using the first variable to record the start date and the second variable to record the end date; when the second variable is earlier than the first variable, exchanging the values ​​of the first variable and the second variable, and then using the first variable to record the start date and the second variable to record the end date.

[0007] According to the date range selection method for a mobile terminal provided by the present invention, style rendering is performed on dates within the date range, including: determining the position of the dates within the current month; performing a first style rendering on the dates between the start date and the end date; and performing a second style rendering on the start date and the end date.

[0008] According to the date range selection method of the mobile terminal provided by the present invention, the current month is selected in response to the user's month selection operation, including: adjusting the year by clicking the year increase button or the year decrease button; and adjusting the month by clicking the month increase button or the month decrease button; the date interface is provided with a year display area and a month display area for displaying the year and the month respectively.

[0009] According to the date range selection method of the mobile terminal provided by the present invention, the current month is selected in response to the user's month selection operation, and also includes: adjusting the month in response to the user's sliding gesture operation on the date interface to select the current month; wherein the sliding gesture operation includes a left sliding operation and a right sliding operation.

[0010] The date range selection method for a mobile terminal provided by the present invention further includes: when the inclination of the sliding gesture operation is less than a preset threshold, determining it as a valid sliding gesture operation.

[0011] According to the date range selection method for a mobile terminal provided by the present invention, after determining the start date and the end date, it also includes: displaying the selected start date and the end date; and jumping to the interface of the year and month of the start date or the end date by clicking the start date jump button or the end date jump button.

[0012] In a second aspect, the present invention provides a date range selector, comprising a computer program, wherein when the computer program is executed by a processor, the steps of the date range selection method for a mobile terminal as described in any one of the above items are implemented.

[0013] In a third aspect, the present invention provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the steps of the date range selection method for a mobile terminal as described in any one of the above are implemented.

[0014] In a fourth aspect, the present invention further provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the above-described methods for selecting a date range on a mobile terminal.

[0015] The date range selection method and date range selector provided by the present invention have the following advantages over the prior art:

[0016] (1) Some existing date selectors may cause slow page loading and reduced response speed due to loading too much data (such as data from multiple months). The technical solution provided by the present invention adopts a single month display method, which reduces the amount of data loaded each time and improves the page loading speed and response speed.

[0017] (2) Some date selectors may only allow the selection of a date range from left to right, and the user cannot flexibly select and cancel the selection. With the technical solution provided by the present invention, the user can flexibly select the date range from left to right or from right to left, and the system will automatically adjust the start and end dates. The user can also click on the selected date to cancel the selection, which is convenient for fine-tuning the range.

[0018] (3) Traditional date selectors may lack intuitive interaction methods, and users need to click multiple times to complete date selection, which is cumbersome to operate. The present invention provides an intuitive method for switching months and years through buttons and text boxes, so that users can quickly select the target month. By adding touch gesture operations, users can switch months by sliding the screen, which makes the operation more natural and smooth. Clicking on a selected date can directly jump to the month in which the date is located, which is convenient for users to make fine adjustments.

[0019] In summary, the date range selection method and date range selector provided by the present invention not only improve the performance and user experience, but also increase flexibility and functionality, making it more efficient and convenient for users to select dates on the mobile terminal. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0021] Figure 1 It is a flowchart of the date range selection method of the mobile terminal provided by the present invention;

[0022] Figure 2 It is a display effect diagram provided by the present invention;

[0023] Figure 3 It is a structural schematic diagram of the electronic device provided by the present invention. DETAILED DESCRIPTION

[0024] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0025] It should be noted that, in the description of the embodiments of the present invention, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "include one..." do not exclude the presence of other identical elements in the process, method, article or device including the elements. The orientation or positional relationship indicated by the terms "upper", "lower", etc. is based on the orientation or positional relationship shown in the accompanying drawings, and is only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation on the present invention.

[0026] The terms "first", "second", etc. in this application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of the same type, and the number of objects is not limited. For example, the first object can be one or more.

[0027] Mini Program is a new way to connect users and services. It can be easily obtained and spread in WeChat, and has an excellent user experience. It is developed using JavaScript and WXML. Figure 1-Figure 2 Describe the technical solution of the present invention.

[0028] Figure 1 is a flow chart of a date range selection method for a mobile terminal provided by the present invention, Figure 2 It is a display effect diagram provided by the present invention, such as Figure 1 As shown, the method, applied to a mobile terminal, includes but is not limited to the following steps:

[0029] Step 101: In response to the user's month selection operation, the current month is selected, and a date interface of the current month is loaded; the date interface includes all dates of the current month;

[0030] In the applet interface, the user can select a specific month, and in response to this selection, all dates of the selected month are loaded and displayed.

[0031] Optionally, in response to the user's month selection operation, the current month is selected, including but not limited to the following steps: adjusting the year by clicking the year increase button or the year decrease button; and adjusting the month by clicking the month increase button or the month decrease button; the date interface is provided with a year display area and a month display area for displaying the year and month respectively.

[0032] Furthermore, the present invention can also adjust the month in response to a user's sliding gesture operation on the date interface to select the current month; wherein the sliding gesture operation includes a left sliding operation and a right sliding operation.

[0033] For example, it can be set as follows: when a right swipe operation is detected, the month is decremented by one; when a left swipe operation is detected, the month is incremented by one.

[0034] In order to detect the sliding operation more accurately, the present invention also determines whether the user's sliding operation is a valid sliding operation. Specifically, when the inclination of the sliding gesture operation is less than a preset threshold, it is determined to be a valid sliding gesture operation.

[0035] Step 102: In response to the user's date selection operation on the date interface, determine the start date and the end date.

[0036] In the loaded month interface, the user can select the start date and end date.

[0037] Specifically, step 102 may be implemented in the following manner:

[0038] (1) In response to a user's first click operation on the date interface, selecting a first date, and assigning the value of the first date to a first variable.

[0039] (2) In response to a second click operation by the user on the date interface, a second date is selected, and the value of the second date is assigned to a second variable.

[0040] (3) When the second variable is later than the first variable, the first variable is used to record the start date and the second variable is used to record the end date. When the second variable is earlier than the first variable, the values ​​of the first and second variables are swapped, and the first variable is used to record the start date and the second variable is used to record the end date.

[0041] Step 103: Determine the selected date range according to the start date and the end date, so as to perform style rendering on the dates within the date range.

[0042] Based on the start and end dates selected by the user, the application calculates the selected date range; it applies specific styles to the dates within this range, such as changing the background color or text color, to highlight these dates.

[0043] Optionally, performing style rendering on dates within the date range includes: determining the position of the date within the current month; performing first style rendering on dates between a start date and an end date; and performing second style rendering on the start date and the end date.

[0044] For example, for the start date and end date, apply a special style (a certain background color or border); for the dates between the start date and the end date, apply another style (such as a different background color or border); for other dates in the current month, keep the default style.

[0045] As an optional embodiment, the rendering process is further described below:

[0046] (1) Initialize variables: Define two variables, startDate and endDate, to store the start date and end date.

[0047] (2) First click operation: When the user clicks a date for the first time, the clicked date value is assigned to the startDate variable. Update the interface, for example, highlight the selected date.

[0048] (3) Second click operation:

[0049] When the user clicks the date for the second time, the clicked date value is assigned to the endDate variable.

[0050] Check if endDate is later than startDate:

[0051] If endDate is later than startDate, keep the values ​​of startDate and endDate unchanged.

[0052] If endDate is earlier than startDate, the values ​​of startDate and endDate are swapped to ensure that startDate is always earlier than endDate.

[0053] (4) Update interface:

[0054] Highlight all dates in the range from startDate to endDate.

[0055] The highlighting method can be set according to the requirements. For example, different colors of dates can help users distinguish between dates within a range and date boundaries, which will not be described in detail here.

[0056] After determining the start date and end date, the present invention also includes: displaying the selected start date and end date; and jumping to the interface of the year and month of the start date or end date by clicking the start date jump button or the end date jump button.

[0057] Specifically, the mini program interface can display the selected date. After the user selects the date, the interface is updated to display the start date and end date; two buttons are added to the interface to jump to the year and month of the start date and end date respectively.

[0058] In summary, the date range selection method and date range selector provided by the present invention not only improve the performance and user experience, but also increase flexibility and functionality, making it more efficient and convenient for users to select dates on the mobile terminal.

[0059] In order to more clearly illustrate the technical solution of the present invention, the following is a detailed description of the technical solution of the present invention. Figure 2 Provide further explanation.

[0060] 1. Date range selection and display

[0061] The component maintains two variables, firstDay and secondDay, to record the selected date and time stamp. If firstDay has a value, secondDay is assigned the value of that date. If secondDay is later than firstDay, the process ends; if it is earlier than firstDay, firstDay and secondDay are swapped. This allows both forward and reverse selection of date ranges:

[0062] The date component is generated through the for syntax of the applet. The code is as follows:

[0063] <view wx:for="{{days}}">

[0064] <view> {{item}}< / view>

[0065]

[0066] days is an array with the length of the number of days in the current month, for example [1,2,3,…,30], so that 30 date boxes can be rendered on the page, and item is the value of each array item

[0067] When rendering the date, each date component associates the judgment function and style through the wxs function of the applet to calculate whether the current date is the selected date or within the range. The format is as follows:

[0068] <viewwx:for="{{days}}"class=

[0069] "{{fn.isHignLight(year,month,item,firstDay,secondDay)}}">

[0070] When using the wxs function, the component will automatically re-render when the function's input parameter changes, without having to traverse the date data in the js code to add additional data such as whether the current date is selected or within the range.

[0071] The function logic is as follows: if the date timestamp is between firstDay and secondDay, return the highlighted style; if it is equal to firstDay or secondDay, return the highlighted style in another color; otherwise, return the normal style. In this way, the date style display on the calendar can be controlled with only two variables.

[0072] Different colors of dates can help users distinguish between dates within a range and date boundaries.

[0073] The year and month are stored in year and month. Two buttons are added to control the increase and decrease of their values.

[0074] The entire program only needs 5 variables: year, month, days, firstDay, and secondDay. The display and style changes of the date can be controlled through the applet's for syntax and wxs function.

[0075] 2. Button gestures and interactions

[0076] In order to solve the performance problem, the component is changed to a single month display, which will cause the interaction speed to decrease. In order to compensate for this loss, the present invention adds multiple buttons, gestures and interaction designs to compensate for it.

[0077] Add a button to the left and right of the date and month text boxes. Click the button to increase or decrease the corresponding value to complete the switch of month and year. When the month is beyond the range of January to December, increase or decrease the year. For example, 2022-12, add one month to become 2023-1

[0078] Clicking the start date or end date in the calendar again cancels the selection and clears the corresponding firstDay or secondDay variable, allowing the user to fine-tune the range without changing the date at the other end.

[0079] The selected start and end dates above the calendar can be clicked, and the year and month will jump directly to that date, making it easy for users to fine-tune the selected date.

[0080] Add touch monitoring to the calendar part, and users can switch months through gesture operations. The specific implementation is as follows: monitor the "ontouch" event of the calendar part of the screen, obtain the coordinates x and y of the starting touch point, and x2 and y2 of the touch end point, subtract the two to obtain the change in coordinates dx and dy, calculate the absolute value of dy / dx, and obtain the ratio of the change in the vertical axis to the horizontal axis, so as to obtain the inclination of the user's sliding operation. If the inclination is too large, it is not considered as a left or right slide. If dx is greater than 0, it is a right slide, and the month is reduced by one; if dx is less than 0, it is a left slide, and the month is increased by one.

[0081] In summary, the date range selection method and date range selector provided by the present invention have the following advantages over the prior art:

[0082] (1) Some existing date selectors may cause slow page loading and reduced response speed due to loading too much data (such as data from multiple months). The technical solution provided by the present invention adopts a single month display method, which reduces the amount of data loaded each time and improves the page loading speed and response speed.

[0083] (2) Some date selectors may only allow the selection of a date range from left to right, and the user cannot flexibly select and cancel the selection. With the technical solution provided by the present invention, the user can flexibly select the date range from left to right or from right to left, and the system will automatically adjust the start and end dates. The user can also click on the selected date to cancel the selection, which is convenient for fine-tuning the range.

[0084] (3) Traditional date selectors may lack intuitive interaction methods, and users need to click multiple times to complete date selection, which is cumbersome to operate. The present invention provides an intuitive method for switching months and years through buttons and text boxes, so that users can quickly select the target month. By adding touch gesture operations, users can switch months by sliding the screen, which makes the operation more natural and smooth. Clicking on a selected date can directly jump to the month in which the date is located, which is convenient for users to make fine adjustments.

[0085] On the other hand, the present invention also provides a date range selector, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer can execute the date range selection method for a mobile terminal provided by the above-mentioned embodiments, the method including: selecting the current month in response to the user's month selection operation, and loading the date interface of the current month; the date interface includes all dates of the current month; determining the start date and end date in response to the user's date selection operation on the date interface; determining the selected date range based on the start date and the end date, so as to style the dates within the date range.

[0086] Figure 3 is a schematic diagram of the structure of the electronic device provided by the present invention, such as Figure 3 As shown, the electronic device may include: a processor 310, a communication interface 320, a memory 330 and a communication bus 340, wherein the processor 310, the communication interface 320 and the memory 330 communicate with each other through the communication bus 340. The processor 310 may call the logic instructions in the memory 330 to execute the date range selection method of the mobile terminal, the method comprising: selecting the current month in response to the user's month selection operation, and loading the date interface of the current month; the date interface includes all dates of the current month; determining the start date and the end date in response to the user's date selection operation on the date interface; determining the selected date range according to the start date and the end date, so as to render the date within the date range in a style.

[0087] On the other hand, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to execute the date range selection method for a mobile terminal provided in the above-mentioned embodiments, the method comprising: selecting the current month in response to a user's month selection operation, and loading a date interface for the current month; the date interface includes all dates of the current month; determining a start date and an end date in response to a user's date selection operation on the date interface; determining a selected date range based on the start date and the end date, so as to perform style rendering on the dates within the date range.

[0088] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0089] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A date range selection method for a mobile terminal, characterized in that: Applied to mobile terminals, including: In response to the user's month selection operation, the current month is selected, and a date interface of the current month is loaded; the date interface includes all dates of the current month; In response to a date selection operation by a user on the date interface, determining a start date and an end date; Based on the start date and end date, determine the selected date range to style the dates within the date range.

2. The date range selection method of the mobile terminal according to claim 1, characterized in that: In response to a date selection operation by a user on the date interface, determining a start date and an end date includes: In response to a first click operation of the user on the date interface, selecting a first date, and assigning a value of the first date to a first variable; In response to a second click operation of the user on the date interface, selecting a second date, and assigning the value of the second date to a second variable; When the second variable is later than the first variable, the first variable is used to record the start date and the second variable is used to record the end date; When the second variable is earlier than the first variable, swap the values ​​of the first and second variables, then use the first variable to record the start date and the second variable to record the end date.

3. The method for selecting a date range on a mobile terminal according to claim 1, characterized in that: Render dates within a date range in different styles, including: Determine the position of the date within the current month; Render the dates between the start date and the end date in the first style; Render the start and end dates in a second style.

4. The method for selecting a date range on a mobile terminal according to claim 1, characterized in that: In response to the user's month selection operation, the current month is selected, including: Adjust the year by clicking the Year Increase button or the Year Decrease button; and, Adjust the month by clicking the month increase button or month decrease button; The date interface is provided with a year display area and a month display area for displaying the year and the month respectively.

5. The method for selecting a date range on a mobile terminal according to claim 1, characterized in that: In response to the user's month selection operation, the current month is selected, and the method further comprises: In response to a user's sliding gesture operation on the date interface, the month is adjusted to select the current month; The sliding gesture operation includes a left sliding operation and a right sliding operation.

6. The method for selecting a date range on a mobile terminal according to claim 5, characterized in that: Also includes: When the inclination of the sliding gesture operation is less than a preset threshold, it is determined to be a valid sliding gesture operation.

7. The date range selection method of the mobile terminal according to claim 1, characterized in that: After determining the start and end dates, also include: Display the selected start date and end date; By clicking the start date jump button or the end date jump button, you can jump to the interface of the year and month of the start date or end date.

8. A date range selector comprising a computer program, characterized in that: When the computer program is executed by a processor, the steps of the date range selection method for a mobile terminal as described in any one of claims 1 to 7 are implemented.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the date range selection method for a mobile terminal as described in any one of claims 1 to 7 are implemented.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the date range selection method for a mobile terminal as described in any one of claims 1 to 7 are implemented.

Images