Separate Input Fields for Date/Time Parts - Done twice on same form page?

[roattw]

I need START Time and an END Time  on a form.  I was using the Separate Input Fields for Date/Time Parts steps.  Works well but only once.

But I need to do it twice.  I need to use it once for a Start Time field and an  End Time field.

When I enter the script twice in footer (once for a start time section, once for an end time section) it doesnt work anymore.  Also tried combining them but no luck.

<script>
document.getElementsByName('Submit')[0].onmouseover = function(){ 
<script> var date = document.getElementById('cbParamVirtual1').value;
if(date == "") { date = "1/1/2011"; }
var hour = document.getElementById('cbParamVirtual2').value;
if(hour =="") { hour="00"; }
var minute = document.getElementById('cbParamVirtual3').value;
if(minute == "") { minute = "00"; }
document.getElementById('InsertRecordTIME1').value = date + " " + hour + ":" + minute;
};
</script>

<script>
document.getElementsByName('Submit')[0].onmouseover = function(){ 
var date2 = document.getElementById('cbParamVirtual4').value;
if(date == "") { date = "1/1/2011"; }
var hour2 = document.getElementById('cbParamVirtual5').value;
if(hour =="") { hour="00"; }
var minute2 = document.getElementById('cbParamVirtual6').value;
if(minute == "") { minute = "00"; }
document.getElementById('InsertRecordTIME2').value = date + " " + hour + ":" + minute;
};
</script>

Any way to run this twice.  Or a better way to get a Start Time and End Time fields using time values so they can be subtracted as time between intervals later?

[Hastur]

Hello @roattw

Try to use this code:

<script>
function first() {
	var date = document.getElementById('cbParamVirtual1').value;
	if(date == "") { date = "1/1/2011"; }
	var hour = document.getElementById('cbParamVirtual2').value;
	if(hour =="") { hour="00"; }
	var minute = document.getElementById('cbParamVirtual3').value;
	if(minute == "") { minute = "00"; }
	document.getElementById('InsertRecordTIME1').value = date + " " + hour + ":" + minute;
}

function second() {
	var date2 = document.getElementById('cbParamVirtual4').value;
	if(date == "") { date = "1/1/2011"; }
	var hour2 = document.getElementById('cbParamVirtual5').value;
	if(hour =="") { hour="00"; }
	var minute2 = document.getElementById('cbParamVirtual6').value;
	if(minute == "") { minute = "00"; }
	document.getElementById('InsertRecordTIME2').value = date + " " + hour + ":" + minute;
}

document.getElementsByName('Submit')[0].addEventListener('mouseover', first);
document.getElementsByName('Submit')[0].addEventListener('mouseover', second);
</script>

You should add new events using "addEventListener()" method. In other case, you will just overwrite the existing one.

[roattw]

Thanks Andrew, will give it a try and report back.  I would also like the script to occur on exit of the fields, not on Submit.

[Kurumi]

Hi everyone - Just wanted to share this solution. If you want to save and select Date and Time in (1) Text Field instead of separating them into different fields. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To know more, you can check the post here: