I am currently facing an issue with validating two time strings in my buefy form using vue. The goal is to ensure that the second time input does not exceed a one-hour difference from the first time input. Both time fields have granularity down to milliseconds.
Here is the script I am using:
import { Validator } from 'vee-validate';
//Cross-field Rules
Validator.extend('isOneHour', (value, [otherValue]) => {
function toSeconds(time_str) {
// Extract hours, minutes and seconds
var parts = time_str.split(':');
var mili = time_str.split('.')
// compute and return total seconds
return parts[0] * 3600 + // an hour has 3600 seconds
parts[1] * 60 + // a minute has 60 seconds
+parts[2] // seconds
+ mili[0] / 1000; //miliseconds
}
console.log(value, otherValue); // out
var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));
return difference <= 3600;
}, {
hasTarget: true
});
Below is the template implementation:
<b-input
@keyup.native.enter="getData()"
editable
:value="startTime"
@change.native="startTime = $event.target.value"
placeholder="ex. 11:22:00.000"
icon="clock"
v-mask="'##:##:##.###'"
name="startTime"
ref="endTime"
></b-input>
<b-input
editable
name="endTime"
:value="endTime"
@change.native="endTime = $event.target.value"
placeholder="ex. 11:25:30.450"
icon="stopwatch"
@keyup.native.enter="getData()"
v-mask="'##:##:##.###'"
v-validate="'isOneHour:endTime'"
></b-input>
Unfortunately, this code results in an endless loop and eventually crashes the app after encountering the line:
var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));The error message I receive in the console is:
TypeError: time_str.split is not a functionI am struggling to pinpoint what exactly I am doing wrong here. Any insights or suggestions would be greatly appreciated.