JS script to autocomplete start_time and end

JS script to autocomplete start_time and end_time : Validation issue

By Guest on Wednesday, 05 May 2021

Replies 2

Likes 0

Views 1K

Votes 0

Hello,
First at all, I'm not develloper

sorry for this dirty script (and it's a test, not final script..)

I wrote little JS script (it load with Jumi when user open Create Event frontend page) to complete (prefill) start_time and end_time with this values :
start_time : now
end_time : now + 10mn

This part is ok

The second part of script it's if user change start_time, and click on +5mn button, the function read start_time and recalcul end_time to add +5mn.

But if I specify start_time value posterior at end_time, and click on +5mn, the calcul is ok, end_time is update with new start_time value with +5mn, but the end_time field is red (validation issue ; date/time invalid)

The behavior seems to be the validation doesn't recheck start_time again and probaly see end_time is anterior at start_time..

How I can force revalidation/reload of fields with javascript...?

Thanks
Regards
Philippe

The script :



// Variables

const minutesToAdjust = 10;

const millisecondsPerMinute = 60000;

const FiveminutesToAdjust = 5;



// Current time

const originalDate = new Date();

var originalMinute = String(originalDate.getMinutes()).padStart(2, "0");

var originalHour = String(originalDate.getHours()).padStart(2, "0");





// Add 10mn by default when open form

const addtimeDate = new Date(originalDate.valueOf() + (minutesToAdjust * millisecondsPerMinute));

var addMinute = String(addtimeDate.getMinutes()).padStart(2, "0");

var addHour = String(addtimeDate.getHours()).padStart(2, "0");



// Read start_time value (if manually modified)

function readStartTime() 

{

var new_start_value = document.getElementById('start_time').value;

var newStartHour = String(new_start_value).substr(0, 2);

var newStartMinute= String(new_start_value).substr(3, 4);



// pick end time string & convert to time



var updateStartTime = new Date();

new_hours =updateStartTime.setHours(newStartHour);

new_minutes = updateStartTime.setMinutes(newStartMinute);



// test Add 5mn

var newEndDate = new Date(updateStartTime.valueOf() + (FiveminutesToAdjust * millisecondsPerMinute));

var addMinuteFive = String( newEndDate.getMinutes()).padStart(2, "0");

var addHourFive = String( newEndDate.getHours()).padStart(2, "0");

var newEndDate = (addHourFive + ":" + addMinuteFive);

document.getElementById("end_time").value = newEndDate;





// if its not edition

var element = document.getElementById('title');

if (element != null && element.value == '') {

document.getElementById("title").value = ("Fermeture");

document.getElementById("start_time").value = (originalHour + ":" + originalMinute);

document.getElementById("end_time").value = (addHour + ":" + addMinute);

}



// debug

//console.log(new_start_value);

//console.log(newEndDate);

//console.log(addHourFive + ":" + addMinuteFive);

}

No problem, so here is a neat little trick for you!

https://gyazo.com/66b20d9c4de03b90344bb605a5197df4
https://gyazo.com/a78500f2ddea5e164b4fe4e8530dfa63

With Firefox you can see the events on elements, and on change (user change) we run a check, this depends if it is 12 or 24 hour. So try the attached, it should work in theory.



// Variables

const minutesToAdjust = 10;

const millisecondsPerMinute = 60000;

const FiveminutesToAdjust = 5;



// Current time

const originalDate = new Date();

var originalMinute = String(originalDate.getMinutes()).padStart(2, "0");

var originalHour = String(originalDate.getHours()).padStart(2, "0");





// Add 10mn by default when open form

const addtimeDate = new Date(originalDate.valueOf() + (minutesToAdjust * millisecondsPerMinute));

var addMinute = String(addtimeDate.getMinutes()).padStart(2, "0");

var addHour = String(addtimeDate.getHours()).padStart(2, "0");



// Read start_time value (if manually modified)

function readStartTime() 

{

var new_start_value = document.getElementById('start_time').value;

var newStartHour = String(new_start_value).substr(0, 2);

var newStartMinute= String(new_start_value).substr(3, 4);



// pick end time string & convert to time



var updateStartTime = new Date();

new_hours =updateStartTime.setHours(newStartHour);

new_minutes = updateStartTime.setMinutes(newStartMinute);



// test Add 5mn

var newEndDate = new Date(updateStartTime.valueOf() + (FiveminutesToAdjust * millisecondsPerMinute));

var addMinuteFive = String( newEndDate.getMinutes()).padStart(2, "0");

var addHourFive = String( newEndDate.getHours()).padStart(2, "0");

var newEndDate = (addHourFive + ":" + addMinuteFive);

document.getElementById("end_time").value = newEndDate;





// if its not edition

var element = document.getElementById('title');

if (element != null && element.value == '') {

document.getElementById("title").value = ("Fermeture");

document.getElementById("start_time").value = (originalHour + ":" + originalMinute);

document.getElementById("end_time").value = (addHour + ":" + addMinute);

}



var 12hour = document.getElementById('view12Hour');

if(12hour.checked) {

    check12hTime(document.getElementById('start_time'));

    check12hTime(document.getElementById('end_time'));

} else {

    checkTime(document.getElementById('start_time'));

    checkTime(document.getElementById('end_time'));

}



// debug

//console.log(new_start_value);

//console.log(newEndDate);

//console.log(addHourFive + ":" + addMinuteFive);

}

Guest

Thursday, 06 May 2021 10:21

0 Likes

0 Votes

0 Comments

#221694

Wow thanks it's awesome !
I'll be back in few days with the final script, if others users are interested.. I'll try before to change button for radio button with many values, and clean code

Thanks again !!

Guest

Thursday, 06 May 2021 13:17

0 Likes

0 Votes

0 Comments

#221704