Jump to content

Time Sheet Date and Time in and Out


Recommended Posts

Trying to capture Date/Time In and Date/Time Out  for an employee time sheet. (Sampling code for date time in only, once this works I will use same method for Date/Time Out).
I will in the end hide @Defined_Time_In but am leaving it Text255 so I can make see if the code is working in real time.

 @Defined_Time_In = Date Field
 @cbParm Virtual 1 - 4 are Text255  (V1 = Date, V2=Hour, V3=Minute and V4=Second)
 @cbParmVirtual5 is a custom Dropdown (AM or PM)


<script>

  function concatenate()
 {
  
   var One = document.getElementById("InsertRecordcbParmVirtual1").value;
   var Two = document.getElementById("InsertRecordcbParmVirtual2").value;
   var Three = document.getElementById("InsertRecordcbParmVirtual3").value;
   var Four = document.getElementById("InsertRecordcbParmVirtual4").value;
   var Five = document.getElementsById("InsertRecordcbParmVirtual5").value;
   var link  =  One + " " + Two +":" + Three + ":"+Four + " "+ Five;
   document.getElementById("InsertRecordDefined_Time_In").value = link;
 }

document.getElementById("InsertRecordcbParmVirtual1").onkeyup = concatenate;
document.getElementById("InsertRecordcbParmVirtual2").onkeyup = concatenate;
document.getElementById("InsertRecordcbParmVirtual3").onkeyup = concatenate;
document.getElementById("InsertRecordcbParmVirtual4").onkeyup = concatenate;
document.getElementsById("InsertRecordcbParmVirtual5").onkeyup = concatenate;

 </script>

If I can't get the above to work I will probably use https://forums.caspio.com/topic/5069-time-sheet/ . I would really like to see onchange or onkeyup.

Thanks in advance for any help !


 

Link to comment
Share on other sites

I think you have some typos in your script. InsertRecordcbParmVirtual1 is incorrect, cbParamVirtual1  is the correct ID, virutal fields are not defined by Insert or Edit prefixes.
 
Also, in dropdown fields, you can not have a keyup action since there is no such action, it should be onchange. Besides, to get dropdown values, you have a collection of objects, so you can not reference to them as you would do with normal text fields.
 
To get dropdown values you should use:
 
var e = document.getElementById("exactFieldID");
var ddValue = e.options[e.selectedIndex].value;
 
To track the onchange event:
 
document.getElementById("exactFieldID").onchange = yourFunctionName;
 
Hope it helps.
Link to comment
Share on other sites

Once again DouVega, can't thank you enough. Works perfectly.  

For anyone else, thanks to DouVega here is the working iteration:

<script>

  function concatenate()
 {
  
   var One = document.getElementById("cbParamVirtual1").value;
   var Two = document.getElementById("cbParamVirtual2").value;
   var Three = document.getElementById("cbParamVirtual3").value;
   var Four = document.getElementById("cbParamVirtual4").value;
   var Five = document.getElementById("cbParamVirtual5").value;

   var link  =  One + " " + Two +":" + Three + ":"+Four + " "+Five;
   document.getElementById("InsertRecordDefined_Time_In").value = link;
 }

document.getElementById("cbParamVirtual1").onchange = concatenate;
document.getElementById("cbParamVirtual2").onchange = concatenate;
document.getElementById("cbParamVirtual3").onchange = concatenate;
document.getElementById("cbParamVirtual4").onchange = concatenate;
document.getElementById("cbParamVirtual5").onchange = concatenate;

 </script>

Link to comment
Share on other sites

Please see attached Screenshot.
Note: this is only the IN date and time. Once this all works as desired, I will do the exact same thing for Out time and date.

Ok "A" works great. I can change any of the drop-downs and the "Defined_Time_In" is properly populated in real time (onchange).  Now I would like to be able to use the "B" "Defined Work Schedule" Drop-down and be able for that to populate the same fields.
In other words, would like to incorporate "B" the "Defined Work Schedule" Drop-down to auto populate Virtual2(Hour), Virtual3(Minutes), Virtual4(Seconds) and Virtual5(AM/PM). 

If this is possible and the  "Defined Work Schedule" Dropdown is able to populate V2-V5, still need for the user to change any of these individually with their prospective dropdowns. In other words still have the functionality of the JScript before introducing the new "Defined Work Schedule" Dropdown. 

Thanks You
 

Time_Sheet_Screen_Shot.png

Link to comment
Share on other sites

For future reference here is the JS for both date and time In and date and time Out.

I do have one question, is there a way to prevent the submission if someone chooses an OUT date and time which is less than the IN date and time. Just a little precaution. I was thinking if we could put an if statement which is in essence >

Have Date Out required : IF Defined_Date_Out is Less than Defined_Date_In > reset Defined_Date_Out to Blank. Since it is required it would stop the submission. I am not sure of the syntax but I think the logic would work.

As always thanks for any help.

I have done a lot of testing and the following seems to work every time.

<div id="con1">
<script>

  function concatenate1()
 {
  
   var One = document.getElementById("cbParamVirtual1").value;
   var Two = document.getElementById("cbParamVirtual2").value;
   var Three = document.getElementById("cbParamVirtual3").value;
   var Four = document.getElementById("cbParamVirtual4").value;
   var Five = document.getElementById("cbParamVirtual5").value;
 
  var link  =  One + " " + Two +":" + Three + ":"+Four + " "+Five;
   document.getElementById("InsertRecordDefined_Time_In").value = link;

 }

document.getElementById("cbParamVirtual5").onchange = concatenate1;
document.getElementById("cbParamVirtual1").onchange = concatenate1;
document.getElementById("cbParamVirtual2").onchange = concatenate1;
document.getElementById("cbParamVirtual3").onchange = concatenate1;
document.getElementById("cbParamVirtual4").onchange = concatenate1;

 </script>
</div>

<div id="con2">
<script>

  function concatenate2()
 {
   var Six = document.getElementById("cbParamVirtual6").value;
   var Seven = document.getElementById("cbParamVirtual7").value;
   var Eight = document.getElementById("cbParamVirtual8").value;
   var Nine = document.getElementById("cbParamVirtual9").value;
   var Ten = document.getElementById("cbParamVirtual10").value;
  
   var linkout  =  Six + " " + Seven +":" + Eight + ":"+Nine + " "+Ten;
   document.getElementById("InsertRecordDefined_Time_Out").value = linkout;
 }
document.getElementById("cbParamVirtual10").onchange = concatenate2;
document.getElementById("cbParamVirtual6").onchange = concatenate2;
document.getElementById("cbParamVirtual7").onchange = concatenate2;
document.getElementById("cbParamVirtual8").onchange = concatenate2;
document.getElementById("cbParamVirtual9").onchange = concatenate2;


 </script>

 </div>

Link to comment
Share on other sites

Please See Above attachment. In attempting to integrate drop-down values so I could use both the working code (Above) and the drop-down. I unsuccessfully tried the following. If I can find a way for this code to work I will apply the same for every Work Schedule in the drop-down). Any advise would be appreciated.

Code Snippet

  var shift = document.getElementById("Defined_Work_Schedule").value;
   var One = document.getElementById("cbParamVirtual1").value;    
   var Two = document.getElementById("cbParamVirtual2").value;
           if (shift == "7:00 AM to 7:00 PM")
            var Two="07";
   var Three = document.getElementById("cbParamVirtual3").value;
             if (shift == "7:00 AM to 7:00 PM")
            var Three="00";

etc.....

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

×
×
  • Create New...