Calculate a few days, hours and minutes between two dates
1. Usage scenarios
When we calculate the time at ordinary times, after selecting the end time of the start time, the data in the format of 2.5 hours and 2.5 days will be displayed, so what should we do when we want to implement it in a few days, hours and minutes ~
2. Video Display
3. Procedure
3.1 Step 1: Create and configure a form
Create a form and add two date components, named start date and end date respectively, and add a numeric component.
3.2 Step 2: configure the formula to calculate the time interval
First, we calculate the number of seconds between the two date components during the day selection period. The difference returned by the date components is the timestamp, which is our number of milliseconds. Therefore, we need to convert the timestamp, use milliseconds/1000 to get the number of seconds, and use FIXED formula to keep two decimal places. At this time, we should first determine whether the date is empty, and calculate the difference of seconds when it is not empty.
3.3 Step 3: Convert time
3.3.1 data splicing
To configure days, hours, and minutes, we need to calculate integers and concatenate them together. Therefore, we need to use JS to add action events to seconds, triggered when the value of seconds is calculated.
3.3.2 data processing-calculation days
When we use seconds to convert to days, we can use seconds/60/60/24 to calculate, but the calculated value has a decimal point;
For example, 2.5 days is actually 2 days and 12 hours, so we only need to get 2 as the number of days;
In this case, we can use math.floor() to obtain this value;
Then add the unit "d"
As shown in the following figure:
3.3.3 data processing-calculating hours
We convert the number of seconds to hours, which can be calculated by seconds/60/60. At this time, we calculate the total number of hours, while when we calculate the number of days, the calculated value has a decimal point;
For example, 2.5 days is actually 2 days and 12 hours, then we can get the decimal point part, that is, the surplus, then we first use seconds/86400, the remainder obtained is the number of seconds in less than one day. Then we divide it by 3600 to get our hours;
Similarly, we can use math.floor() to obtain the integer of the hour;
Then add the unit "h"
As shown in the following figure:
3.3.4 data processing-calculate minutes
When we use seconds to convert to minutes, we can use seconds/60 to calculate. At this time, the calculated value is the total number of minutes;
In the same way, we first take the remaining days, obtain the seconds of less than one day, then convert the seconds of less than one day into hours, and obtain the seconds of less than one hour, then we divide it by 60, and we can get our minutes;
Similarly, we can use math.floor() to obtain an integer in minutes;
Then add the unit "m"
As shown in the following figure:
3.3.5 configure the format of display data
After calculating the corresponding days, hours, and minutes, you can configure the display data format. When the number of days is equal to 0 d, only hours and minutes are displayed, when the number of days equals 0 d and the hour equals 0 h, only minutes are displayed, otherwise all are displayed,
As shown in the following figure:
The following code can be copied directly,Note the replacement of the unique component identifier.!
export function onChange({ value }) {
// const hour = Math.floor(value / 60) + "h " ;
const day = Math.floor(value / 86400) + "d ";
const hour = Math.floor((value % 86400) / 3600) + "h ";
const min = Math.floor(((value % 86400) % 3600) / 60) + "min";
// const seconds = Math.floor(((value % 86400) % 3600) % 60);
if (day == "0d ") {
//判断当天数等于0d时
if (hour == "0h ") {
//在当天数等于0d时，继续判断当小时等于0h时
this.$("textField_kpm8dvak").setValue(min)
//则将分钟赋值给组件中
} else {
this.$("textField_kpm8dvak").setValue(`${hour}${min}`)
//天数等于0d，小时不等于0h时，将小时分钟赋值给组件
}
} else {
this.$("textField_kpm8dvak").setValue(`${day}${hour}${min}`)
//当天数不等于0d时，将天数小时分钟拼接一起赋值给组件
}
}
4. Achieve results
YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!
------------------------- Get the latest information YIDA, welcome to follow US--------------------------
