Wednesday, 05 May 2021
  2 Replies
  785 Visits
0
Votes
Undo
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);
}
3 years ago
·
#221694
0
Votes
Undo
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);
}

JEvents Club members can get priority forum support at the Support Forum. As well as access to a variety of custom JEvents addons and benefits. Join the JEvents club today!Join the JEvents club today!

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 !!
  • Page :
  • 1
There are no replies made for this post yet.