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 and DaveS 2 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...
Kurumi 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...
DaveS Posted February 7, 2023 Report Share Posted February 7, 2023 @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! Quote Link to comment Share on other sites More sharing options...
DesiLogi Posted February 7, 2023 Author Report Share Posted February 7, 2023 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. 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.