Wednesday, 05 May 2021
  2 Replies
  553 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.

Members Area

Show your support

Unlike many Joomla calendars we do not charge to download JEvents - please show your support for this project by becoming a member of the JEvents Club Club members get access to early releases, exclusive member support forums, and Silver and Gold members can use many exciting JEvents addons

Your membership will ensure that JEvents continues to be the best events calendar for Joomla.