DesiLogi Posted October 22, 2020 Report Share Posted October 22, 2020 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> SinJunYoung 1 Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted October 22, 2020 Author Report Share Posted October 22, 2020 (edited) 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 1 Quote Link to comment Share on other sites More sharing options...
SinJunYoung Posted October 22, 2020 Report Share Posted October 22, 2020 This is helpful, @DesiLogi!!!! Quote Link to comment Share on other sites More sharing options...
Meekeee Posted May 7, 2022 Report Share Posted May 7, 2022 Hi - you may check this solution as well: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.