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 post
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 post
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...