Time Picker code that works on submission form not working on Details View Update

[DesiLogi]

Hi,

I took some code from one of Caspio's demo apps (an appointment scheduler) to create a Time Picker on a Submission form. This works great, allowing far more detailed calendar scheduling than just using the date without a time. The issue is when the user needs to edit the date/time from the Calendar, in Details view. The code doesn't work in this case. I've changed the 'InsertRecord' part to 'EditRecord' but that doesn't seem to make a difference. Is there some difference to calling the code from the Update button vs a Submission button? Any help would be greatly appreciated. 

Below is the process and code in the Submission form's footer. I need to modify it to work in a Calendar's Detail view: 

a) the user selects a Date from the calendar popup for field Virtual6 (set to Text).

b) the user then clicks this link in an html block to open the Time Picker: <input type="time" name="time" class="timeClass"  id="timepicker"/>

c) on Submission the code below runs to combine the date from Virtual6 and the time from the Time Picker into the actual Date/Time field TasksTimeine_CalDate.

****I need this code to work on a Calendar's Detail View Update. 

<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "time");
if (datefield.type!="time") { //if browser doesn't support input type="time"
    document.addEventListener("DataPageReady", function () { 
        $('#timepicker').timepicker({
            timeFormat: 'HH:mm',
            interval: 1,
            minTime: '00:00',
            maxTime: '23:59',
            defaultTime: '6',
            startTime: '00:00',
            dynamic: false,
            dropdown: true,
            scrollbar: true,
            timepicker: true,
            datepicker: false,
            stepHour: 1,
            stepMinute: 1,
            timeInput: true,
            showHour: true,
            showMinute: true,
            pickerTimeFormat: 'hh:mm tt'
        });
    });
}

document.getElementsByName('Submit')[0].onmouseover = function(){ 
var date = document.getElementById('cbParamVirtual6').value;
if(date == "") { date = "1/1/2011"; }
var ampm = document.getElementById('timepicker').value;
document.getElementById('InsertRecordTasksTimeline_CalDate').value = date + " "  + ampm;
};
</script>

 

[DesiLogi]

Got it figured out, after all. If anyone needs this solution. On the Calendar's Detail page, change the line:

document.getElementsByName('Submit')[0].onmouseover = function(){ 

to

document.getElementsByName('Mod0EditRecord')[0].onmouseover = function(){ 

And also change 

document.getElementById('InsertRecordTasksTimeline_CalDate').value = date + " "  + ampm;

to

 

document.getElementById('EditRecordTasksTimeline_CalDate').value = date + " "  + ampm;

This will find the Update button by name and use it to run the code above in the footer. 

This will give you a great Calendar--the user can set times for their appointments like on a normal calendar. 

Edited October 22, 2020 by DesiLogi

[SinJunYoung]

This is helpful, @DesiLogi!!!!

[Meekeee]

Hi - you may check this solution as well: