I have two time strings in my buefy form in vue that i want to validate the second one according to the first one, to only input no more than a one hour difference. I have the fields granularity to miliseconds.
my script
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
});
my template:
<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>
this code does not work, it will create an endless loop, which will cause the app to crash. it works before the:
var difference = Math.abs(toSeconds(value) - toSeconds(otherValue));
my console error is: TypeError: time_str.split is not a function
what am I doing wrong here?