Jump to content

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


Recommended Posts

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>

 

Link to comment
Share on other sites

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 by DesiLogi
Link to comment
Share on other sites

  • 1 year later...
  • 9 months later...

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

 

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...