Add Separate Input Fields for Date/Time Parts

 

At times it is necessary to allow your users to input dates in individual fields such as a day, month, year, hour, minute, and second.  If these date parts can be saved as separate fields in your table, this functionality can easily be implemented with Caspio’s standard features.

If however you need to concatenate these date parts into one date/time value then there is not a standard feature available at this time.  Currently, the best way to accomplish this functionality in your Submission Form DataPages is to use a JavaScript.

This article will give you an explanation of how to implement a JavaScript to retrieve the date parts and concatenate them into the appropriate format, as well as a sample JavaScript that you can edit to use in your DataPage.

Concatenate Date Parts Into One Date/Time Field

Date Parts:

Part: Day / Month / Year Space Hour : Minute : Second
Example: 05 / 11 / 2011 12 : 30 : 00

Note: If the data type of your field is a date/time field, you must include a day / month / year portion even if it is not used later in your app.

Setup your DataPage

Open the DataPage wizard.  Be sure that advanced options and parameters are enabled.  In the Select Fields screen you should have at least one field to record the resulting Date/Time data.  Click Next.

Create your date part fields:

Now you are at the Configure Fields screen.  On this screen we are going to add several Virtual fields that will serve as input fields for each date part.

Click the Insert button and add a Virtual field.  This first Virtual field will be used to collect the Day Month and Year portion.  Change the label to Date.  Under the “Field Options” section check the Calendar popup checkbox.  Now when a user uses the calendar popup tool, the first three date parts will be available in the correct format (including slashes).

Use the Calendar Popup to Record the Date

Now add three more Virtual fields, one each for hours, minutes, and seconds.  Under the Field Options section change the Field width to two characters.  Also, change the max and minimum character length to two characters.  This serves as an insurance policy to make sure the input information will be formatted correctly.

Fix the Maximum Length of the Input

In the Advanced tab, under the External Associations and Defaults section, click the assign static value radio button, and set the static value to “00”.  This is a good visual clue to your users that they need to enter two digits into each of these fields.

Insert a Static Value

In each of these three fields (hour, minute and second) it is a good idea to check the checkbox to continue next element on same line.  This checkbox is located in the advanced tab.

Sample Format for Time Parts

The final touch is to adjust the labels.  The second Virtual field (hour) can be labeled “Time”.  The other two Virtual fields can be labeled colon “:” and the user should understand through context what those input fields are for.

You also need to add one more Virtual field to handle AM and PM.  Add an additional Virtual field, and using the Form element dropdown change this Virtual field to a dropdown.  Under the custom values control, add both AM and PM.  If you are using 24-hour clock localization such as English (UK) then change the value of AM to 0 (zero) and PM to 12. If you are using 12-hour clock localization such as English (default) which is US localization, do not change the values.

AM/PM Dropdown Values

Add and modify the JavaScript

Using the Insert button add header and footer sections to your DataPage.  Select the Footer section and add the following JavaScript.

NOTE: The JavaScript is different based on the localization that you are using. So make sure to use the proper JavaScript provided below.

English (UK) localization (24-hour clock):

<script>
document.getElementById('Submit').onmouseover = function(){
var date =
document.getElementById('cbParamVirtual1').value;
if(date == "")
date = "1/1/2011";
var hour = parseFloat(document.getElementById('cbParamVirtual2').value) + parseFloat(document.getElementById('cbParamVirtual5').value);
if(hour =="24")
hour="12";
else if(hour =="12")
hour="00";
var minute = document.getElementById('cbParamVirtual3').value;
if(minute == "")
minute = "00";
var second = document.getElementById('cbParamVirtual4').value;
if(second == "")
second = "00";
document.getElementById('InsertRecordDate_Field').value = date + " " + hour +":"+ minute +":"+second;
};
</script>

English (US) localization (12-hour clock):

<script>
document.getElementById('Submit').onmouseover = function(){
var date =
document.getElementById('cbParamVirtual1').value;
if(date == "")
date = "1/1/2011";
var hour = document.getElementById('cbParamVirtual2').value;
if(hour =="")
hour="00";
var minute = document.getElementById('cbParamVirtual3').value;
if(minute == "")
minute = "00";
var second = document.getElementById('cbParamVirtual4').value;
if(second == "")
second = "00";
var ampm = document.getElementById('cbParamVirtual5').value;
document.getElementById('InsertRecordActual_DateTime').value = date + " " + hour + ":" + minute + ":" + second + " " + ampm;
};
</script>

DataPage Elements
In order for this JavaScript to function correctly you may need to rename some of the ID names in the preceding JavaScript.

  • Virtual1 – date Input
  • Virtual2 – hour input
  • Virtual3 – minute input
  • Virtual4 – second input
  • Virtual5 – AM/PM input
  • Date_Field – the “real” table-based input field that will record the data

If you haven’t already, continue through the DataPage wizard as normal and click Finish to save your DataPage.

Testing and other considerations

Open the DataPage in Caspio Bridge.  When you mouse over the Submit button, your non-virtual, table based-input field (Subscription Date) should be populated with the concatenated values from all of the Virtual fields.

If the field does not populate you may have entered a field ID incorrectly.  It can be difficult to find exactly where your error is without a debugging tool such as FireBug.  FireBug is a free FireFox plugin that can show you exactly where your JavaScript is breaking.

Once the table-based input field populates correctly, you can open the DataPage wizard again and set that field to hidden.

In this live example we have left that field unhidden so you can see what a functioning JavaScript looks like:

See a Live Example

Be sure to test your form with some sample data after the field has been hidden to be sure it is working correctly.

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.