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!!!!

[Kurumi]

Hi - you may check this solution as well:

 

[DaveS]

@DesiLogi - this is great!  I've managed to copy and adapt for a single field.  My use case is on a submission form (update form and calendar will come later). 

My form has 14 time elements on it (open and close times for 7 days of the week)  I've named them (time1 - time14) and IDd them (timepicker1-timepicker14) in the html block.  I'm optimistic that I could replicate the code 14 times, but it seems like there's probably a better way to do that vs repeating all the code.

Related question:  I'm starting from your IF/then on date, but using "1/1/23" as the initial date because it happens to be a Sunday (and I need to know hours by which day of week).  I added code to just re-set the date field before each time pair (open time, close time), but not sure of the syntax for that.  

Would welcome guidance/suggestions!

Thanks for all of the great content - super-helpful!

 

[DesiLogi]

Hi @DaveS,

I imagine you could have the timepicker code inside a function and have each time element call it when clicked. However, I'm not sure of what the syntax would be, exactly, to do that. Perhaps another person on the forum could nail that down.