Time presetting method and device based on Vue component library and medium

Abstract

The invention discloses a time presetting method and device based on a Vue component library and a medium, belongs to the technical field of Vue front ends and Ant Design Vue component libraries, and aims to solve the technical problem of how to improve the accuracy of a preset time range through an Ant Design Vue component, control the time range and meet the requirements of more application scenes. According to the technical scheme, time selection is achieved through an a-range-pick component of an Ant Design Vue component, and the method specifically comprises the following steps that a time range is preset through range attributes of the a-range-pick component; calling an openChange function to process callback of popping up a calendar and closing the calendar, and ensuring a latest time range; performing time limitation on the calendar through a disable Date attribute; the difference value between the start time and the end time of the calendar pop-up window limitation is controlled through an ok () method and an open parameter, and it is ensured that the amount time difference selected by the user is within a reasonable range.

Description

Technical Field

[0001] The invention relates to the technical field of Vue front end and Ant Design Vue component library, in particular to a time preset method, device and medium based on Vue component library. Background Art

[0002] When using the a-range-picker component of Ant Design Vue, some methods can be used to meet different user needs. However, in the process of use, you will find that due to different user needs, the current method is far from meeting user needs.

[0003] The current a-range-picker component provides examples and related APIs for preset time ranges, but there are some problems. For example, the preset time range of "today" is from the current time to 23:59:59, and "this month" is from now to 23:59:59 on the last day of the month, but in most requirements, "today" refers to from 00:00:00 to 23:59:59, and "this month" refers to from 00:00:00 on the first day of the month to 23:59:59 on the last day.

[0004] At the same time, the a-range-picker component gives an example of "select no more than N days". In the example, the user can select the start time at will, and then limit the end time so that the time difference between the start time and the end time does not exceed N days. The restriction method is to directly gray out the time with a time difference of more than N days, so that the user cannot select it.

[0005] Many demands require a time range for the selection of the start time. For example, if a time is selected that is no more than half a year, the start time needs to be selected within this range. After selecting the start time, the time difference between the start time and the end time must not exceed a certain number of days. Currently, there is no relevant technology to solve these problems.

[0006] Therefore, how to improve the accuracy of the preset time range through the Ant Design Vue component and control the time range to meet the needs of more application scenarios is a technical problem that needs to be solved urgently. Summary of the invention

[0007] The technical task of the present invention is to provide a time preset method, device and medium based on the Vue component library to solve the problem of how to improve the accuracy of the preset time range through the Ant Design Vue component, and to control the time range to meet the needs of more application scenarios.

[0008] The technical task of the present invention is achieved in the following way: a time preset method based on the Vue component library, which uses the a-range-picker component (date selection box component) of the Ant Design Vue component to realize time selection, as follows:

[0009] Preset the time range through the ranges property of the a-range-picker component;

[0010] Call the openChange function to process the callbacks of pop-up and closed calendars to ensure the latest time range;

[0011] Use the disabledDate attribute to set a time limit on the calendar.

[0012] The calendar pop-up window is controlled by the ok() method and the open parameter to limit the difference between the start time and the end time, ensuring that the time difference selected by the user is within a reasonable range.

[0013] Preferably, the ranges attribute receives an object containing preset time information, each time is an array, and each data contains two date objects, representing the upper and lower limits of the date range respectively.

[0014] Preferably, the preset time range is in the following form:

[0015] let timeFrameRanges=ref({

[0016] Last hour: [dayjs().add(-1,'h'), dayjs()] as RangeValue,

[0017] Last 3 hours: [dayjs().add(-3,'h'),dayjs()]as ​​RangeValue,

[0018] Last 12 hours: [dayjs().add(-12,'h'),dayjs()]as ​​RangeValue,

[0019] Today: [dayjs().startof('d'), dayjs().endof('d')] as RangeValue,

[0020] Yesterday: [dayjs().add(-1,'d').startof('d'),dayjs().add(-1,'d').end of('d')]as Rangevalue,

[0021] Last 7 days: [dayjs().add(-7,'d'),dayjs()]as ​​RangeValue,

[0022] });

[0023] Among them, dayjs() represents the current time; dayjs().add represents adding time to the current time; dayjs().subtract represents subtracting time from the current time; dayjs(value).add represents adding time to the specified time (value); dayjs(value).subtract represents subtracting time from the specified time (value); dayjs().startOf represents returning the beginning time of the current time; dayjs().endOf: returns the end time of the current time.

[0024] Preferably, when presetting the time range, the range is automatically preset according to actual needs, as follows:

[0025] The default format for the most recent year is:

[0026] dayjs().subtract(1,'year').startOf('year') to dayjs().endOf('y ear');

[0027] The default format for next month is:

[0028] dayjs().add(1,'month').startOf('month' to dayjs().add(1,'month').endOf('month');

[0029] The default format for this quarter is:

[0030] dayjs().startOf('quarter') to dayjs().endOf('quarter');

[0031] Store the presets for the latest year, next month, and current quarter in an array and pass it to the ranges property of the a-range-picker component.

[0032] Preferably, the disabledDate attribute is a function that receives a date parameter and returns a Boolean value indicating whether the corresponding date is disabled, and the disabledDate attribute is used to limit the selectable start time and end time range.

[0033] More preferably, when the time restriction requirement is that the user cannot select a date later than today, nor a date earlier than half a year ago, the format is as follows:

[0034] const disabledDate=(current:Dayjs)=>{

[0035] return

[0036] current&&

[0037] (current>dayjs().endof('day')||

[0038] current <dayjs(new Date()).subtract(6,'month')||

[0039] current>dayjs(new Date()).subtract(-6,'month')) );

[0041] };

[0042] Among them, dayjs().endOf('day') means that you cannot select a time later than today; <dayjs().subtract(6,'month')||> dayjs().subtract(-6,'month') means that you cannot select a time earlier than half a year ago;

[0043] By calling the disabledDate attribute, the time that does not meet the requirements is grayed out at the beginning, so that the user cannot select the start time. This is more intuitive, that is, the disabledDate attribute is used to limit the overall range of the start time and the end time, and the start time and the end time are limited at the same time;

[0044] When the user clicks the OK button, the ok function and the open parameter are called to check whether the time difference between the selected start time and the end time is greater than half a year:

[0045] If so, keep the calendar popup open until the user selects a time range that meets the requirements.

[0046] Preferably, when setting a time limit on the calendar, the date is formatted using the format method of the dayjs plugin, for example, the time is displayed in the "YYYY-MM-DD" format.

[0047] Preferably, when setting a time limit on the calendar, listen to the change event of the a-range-picker component for the date selection event, obtain the date range selected by the user, and perform corresponding processing, such as updating data or performing other operations.

[0048] An electronic device comprising: a memory and at least one processor;

[0049] Wherein, the memory stores computer-executable instructions;

[0050] The at least one processor executes the computer-executable instructions stored in the memory, so that the at least one processor executes the time preset method based on the Vue component library as described above.

[0051] A computer-readable storage medium stores computer-executable instructions. When a processor executes the computer-executable instructions, the time preset method based on the Vue component library as described above is implemented.

[0052] The time preset method, device and medium based on the Vue component library of the present invention have the following advantages:

[0053] (I) The main purpose of this invention is to improve the function of the time selection box a-range-picker of the Ant Design Vue official website, making the a-range-picker component more flexible and easy to use, and meeting the needs of more application scenarios;

[0054] (ii) The present invention improves the accuracy of the preset time range: for the selection of the preset time range, more time options can be added, such as the last week, the last month, last month, yesterday, the last 3 hours, the last 7 hours, the last 12 hours, today, quarter, half a year, one year, etc., to meet the needs of different users and enable users to set the time range more accurately; and provide preset time, which can increase the function of fast jumping time, so that users can quickly locate a specific time point;

[0055] (III) The present invention limits the time and controls the time range: a time limit can be added to the overall time of the start time and the end time, and a time difference between the two times can also be limited to ensure that the time selected by the user is within a reasonable range; when the time selected by the user does not meet the required time range, there will be a clear error prompt to guide the user to reselect;

[0056] (iv) The present invention enhances the functionality of the component to enable it to provide a richer and more accurate time selection experience;

[0057] (V) Through the present invention, Vue developers can easily integrate the a-range-picker component of Ant Design Vue, and through simple configuration, implement a powerful and user-friendly time selection function, thereby improving the user experience and efficiency of the entire application;

[0058] (VI) The present invention can make the functions of the a-range-picker component richer and more flexible, meeting more complex date selection requirements. Developers can choose appropriate technical solutions to implement the required functions according to actual scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] The present invention is further described below in conjunction with the accompanying drawings.

[0060] Attached Figure 1 This is a flowchart of the time preset method based on the Vue component library. DETAILED DESCRIPTION

[0061] The time preset method, device and medium based on the Vue component library of the present invention are described in detail below with reference to the drawings and specific embodiments of the specification.

[0062] Embodiment 1:

[0063] This embodiment provides a time preset method based on the Vue component library. The method uses the a-range-picker component (date selection box component) of the Ant DesignVue component to implement time selection, as follows:

[0064] S1. Preset the time range through the ranges attribute of the a-range-picker component;

[0065] S2. Call the openChange function to process the callback of pop-up calendar and close calendar to ensure the latest time range;

[0066] S3. Use the disabledDate attribute to set time limits on the calendar.

[0067] S4. Use the ok() method and the open parameter to control the calendar pop-up window to limit the difference between the start time and the end time, ensuring that the time difference selected by the user is within a reasonable range.

[0068] The ranges attribute in step S1 of this embodiment receives an object, which contains preset time information. Each time is an array, and each data contains two date objects, which respectively represent the upper limit and lower limit of the date range.

[0069] The form of the preset time range in step S1 of this embodiment is as follows:

[0070] let timeFrameRanges=ref({

[0071] Last hour: [dayjs().add(-1,'h'), dayjs()] as RangeValue,

[0072] Last 3 hours: [dayjs().add(-3,'h'),dayjs()]as ​​RangeValue,

[0073] Last 12 hours: [dayjs().add(-12,'h'),dayjs()]as ​​RangeValue,

[0074] Today: [dayjs().startof('d'), dayjs().endof('d')] as RangeValue,

[0075] Yesterday: [dayjs().add(-1,'d').startof('d'),dayjs().add(-1,'d').end of('d')]as Rangevalue,

[0076] Last 7 days: [dayjs().add(-7,'d'),dayjs()]as ​​RangeValue,

[0077] });

[0078] Among them, dayjs() represents the current time; dayjs().add represents adding time to the current time; dayjs().subtract represents subtracting time from the current time; dayjs(value).add represents adding time to the specified time (value); dayjs(value).subtract represents subtracting time from the specified time (value); dayjs().startOf represents returning the beginning time of the current time; dayjs().endOf: returns the end time of the current time.

[0079] In the step S1 of this embodiment, the preset time range is automatically preset according to actual needs, which is as follows:

[0080] The default format for the most recent year is:

[0081] dayjs().subtract(1,'year').startOf('year') to dayjs().endOf('y ear');

[0082] The default format for next month is:

[0083] dayjs().add(1,'month').startOf('month' to dayjs().add(1,'month').endOf('month');

[0084] The default format for this quarter is:

[0085] dayjs().startOf('quarter') to dayjs().endOf('quarter');

[0086] Store the presets for the latest year, next month, and current quarter in an array and pass it to the ranges property of the a-range-picker component.

[0087] The disabledDate attribute in step S3 of this embodiment is a function that receives a date parameter and returns a Boolean value indicating whether the corresponding date is disabled. The disabledDate attribute is then used to limit the selectable start time and end time range.

[0088] In this embodiment, when the time restriction requirement is that the user cannot select a date later than today, nor a date earlier than half a year ago, the format is as follows:

[0089] const disabledDate=(current:Dayjs)=>{

[0090] return

[0091] current&&

[0092] (current>dayjs().endof('day')||

[0093] current <dayjs(new Date()).subtract(6,'month')||

[0094] current>dayjs(new Date()).subtract(-6,'month')) );

[0096] };

[0097] Among them, dayjs().endOf('day') means that you cannot select a time later than today; <dayjs().subtract(6,'month')||> dayjs().subtract(-6,'month') means that you cannot select a time earlier than half a year ago;

[0098] By calling the disabledDate attribute, the time that does not meet the requirements is grayed out at the beginning, so that the user cannot select the start time. This is more intuitive, that is, the disabledDate attribute is used to limit the overall range of the start time and the end time, and the start time and the end time are limited at the same time;

[0099] When the user clicks the OK button, the ok function and the open parameter are called to check whether the time difference between the selected start time and the end time is greater than half a year:

[0100] If so, keep the calendar popup open until the user selects a time range that meets the requirements.

[0101] In this embodiment, when a time limit is imposed on the calendar, the date is formatted using the format method of the dayjs plug-in, for example, the time is displayed in the "YYYY-MM-DD" format.

[0102] In this embodiment, when a time limit is set on the calendar, the change event of the a-range-picker component is listened for the date selection event, the date range selected by the user is obtained, and corresponding processing is performed, such as updating data or performing other operations.

[0103] Embodiment 2:

[0104] This embodiment also provides an electronic device, including: a memory and at least one processor;

[0105] Wherein, the memory stores computer-executable instructions;

[0106] The at least one processor executes the computer-executable instructions stored in the memory, so that the at least one processor executes the time preset method based on the Vue component library described in any one of the present inventions.

[0107] The processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or any conventional processor, etc.

[0108] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and calling the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, at least one disk storage period, a flash memory device, or other volatile solid-state storage devices.

[0109] Embodiment 3:

[0110] This embodiment also provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions are loaded by a processor, so that the processor executes the time preset method based on the Vue component library in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.

[0111] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0112] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0113] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0114] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0115] 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 replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A time preset method based on Vue component library, characterized in that: The method is to use the a-range-picker component of the Ant Design Vue component to implement time selection, as follows: Preset the time range through the ranges property of the a-range-picker component; Call the openChange function to process the callbacks of pop-up and closed calendars to ensure the latest time range; Use the disabledDate attribute to set a time limit on the calendar. The calendar pop-up window is controlled by the ok() method and the open parameter to limit the difference between the start time and the end time, ensuring that the time difference selected by the user is within a reasonable range.

2. The time preset method based on the Vue component library according to claim 1 is characterized in that: The ranges property receives an object that contains pre-set time information. Each time is an array, and each data contains two date objects, representing the upper and lower limits of the date range.

3. The time preset method based on the Vue component library according to claim 2 is characterized in that: The preset time range takes the following form: let timeFrameRanges=ref({ Last hour: [dayjs().add(-1,'h'), dayjs()] as RangeValue, Last 3 hours: [dayjs().add(-3,'h'),dayjs()]as ​​RangeValue, Last 12 hours: [dayjs().add(-12,'h'),dayjs()]as ​​RangeValue, Today: [dayjs().startof('d'), dayjs().endof('d')] as RangeValue, Yesterday: [dayjs().add(-1,'d').startof('d'),dayjs().add(-1,'d').end of('d')]as Rangevalue, Last 7 days: [dayjs().add(-7,'d'),dayjs()]as ​​RangeValue, })； Among them, dayjs() represents the current time; dayjs().add represents adding time to the current time; dayjs().subtract represents subtracting time from the current time; dayjs(value).add represents adding time to the specified time; dayjs(value).subtract represents subtracting time from the specified time; dayjs().startOf represents returning the beginning time of the current time; dayjs().endOf: returns the end time of the current time.

4. The time preset method based on the Vue component library according to claim 3 is characterized in that: When presetting the time range, the range is automatically preset according to actual needs, as follows: The default format for the most recent year is: dayjs().subtract(1,'year').startOf('year') to dayjs().endOf('year'); The default format for next month is: dayjs().add(1,'month').startOf('month' to dayjs().add(1,'month').endOf('month'); The default format for this quarter is: dayjs().startOf('quarter') to dayjs().endOf('quarter'); Store the presets for the latest year, next month, and current quarter in an array and pass it to the ranges property of the a-range-picker component.

5. The time preset method based on the Vue component library according to claim 1 is characterized in that: The disabledDate attribute is a function that receives a date parameter and returns a Boolean value indicating whether the corresponding date is disabled. The disabledDate attribute is then used to limit the selectable start and end time ranges.

6. The time preset method based on the Vue component library according to claim 5 is characterized in that: When the time restriction requirement is that the user cannot select a date later than today or earlier than half a year ago, the format is as follows: const disabledDate=(current:Dayjs)=>{ return current&& (current>dayjs().endof('day')|| current <dayjs(new Date()).subtract(6,'month')|| current>dayjs(new Date()).subtract(-6,'month')) )； }； Among them, dayjs().endOf('day') means that a time later than today cannot be selected; <dayjs().subtract(6,'month')||>dayjs().subtract(-6,'month') means that a time earlier than half a year ago cannot be selected; By calling the disabledDate attribute, the time that does not meet the requirements is grayed out at the beginning, so that the user cannot select the start time. That is, the disabledDate attribute is used to limit the overall range of the start time and the end time, and the start time and the end time are limited at the same time; When the user clicks the OK button, the ok function and the open parameter are called to check whether the time difference between the selected start time and the end time is greater than half a year: If so, keep the calendar popup open until the user selects a time range that meets the requirements.

7. The time preset method based on the Vue component library according to claim 6 is characterized in that: When setting a time limit for the calendar, format the date using the format method of the dayjs plugin.

8. The time preset method based on the Vue component library according to claim 7 is characterized in that: When setting a time limit for the calendar, listen to the change event of the a-range-picker component for the date selection event, obtain the date range selected by the user, and perform corresponding processing.

9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores computer-executable instructions; The at least one processor executes the computer-executable instructions stored in the memory, so that the at least one processor executes the time preset method based on the Vue component library as described in any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the processor executes the computer-executable instructions, the time preset method based on the Vue component library as described in any one of claims 1 to 8 is implemented.

Images