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, you can easily implement this functionality in Caspio Bridge. However, if you need to concatenate these date parts into one date/time value then, there is no standard feature available at this time. Currently, the best way to accomplish this functionality in your Submission Form DataPages is to use a JavaScript.

In this article, you implement a JavaScript to retrieve the date parts and concatenate them into the appropriate format in a DataPage. A sample JavaScript is provided for you to edit in your DataPage.

Separate Date Fields

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.

Prerequisite:

Ensure that you have a table or view with at least one Date/Time field.

  1. In Caspio Bridge, point to an existing Submission Form DataPage and click Edit.
  2. In the Select Fields screen, select a Date/Time field and click Next.
  3. In the Configure Fields screen, add a Virtual field to collect the Day, Month, and Year date parts.
    1. Click Insert to add a Virtual field.
    2. In the General Options section, change the Label field to Date.
    3. In the Field Options section, select Calendar popup. When a user uses the calendar popup tool, the first three date parts are available in the correct format (including slashes).
  4. Add three more Virtual fields to collect the Hour, Minute, and Second date parts. Perform the following steps for each of the fields:
    1. Click Insert to add a Virtual field.
    2. In the Field Options section, set the field width to two characters.
    3. Set the maximum and minimum character length to two characters. This serves as an insurance policy to make sure the input information will be formatted correctly.
    4. Click the Advanced tab and in the Layout Options section, select Continue next element on same line.
      • In the External Associations and Defaults section, select Receive value or parameter.
      • Select Default Value from the dropdown and set the value to 00. This is a good visual clue to your users that they need to enter two digits into each of these fields.
  5. 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.
  6. Add a Virtual field to handle the AM and PM periods.
    1. Change the Form element to Dropdown.
    2. In the Custom Values tab control, add AM and PM. If you use a 24-hour clock localization such as English (UK), change the value of AM to 0 (zero) and PM to 12.

Add and modify the JavaScript

Using the Insert button add header and footer sections to your DataPage. Then select the Footer section, go to the Source mode and add the following JavaScript.

NOTE: The JavaScript snippet is different based on the localization that you use. Make sure to use the proper snippet provided below.

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

<script>
document.getElementsByName('Submit')[0].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.getElementsByName('Submit')[0].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>

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 can record the data.

Testing and other considerations

Click Preview of your DataPage in Caspio Bridge. When you hover over the Submit button, your non-virtual, table based-input field (Submitted Date) is populated with the concatenated values from all of the Virtual fields.

If the field does not populate you might 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 has an error.

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

In this live example, the field is not hidden so you can see what a functioning JavaScript snippet 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: 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 any 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 might need a basic understanding of HTML and JavaScript to implement successfully.