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.

However, if 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.

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 have a table or view with at least one field with a Date/Time field.

  1. In Caspio Bridge homepage, select an existing Submission Form DataPage and click Edit. Ensure both Advanced Options and Parameters are enabled. Select if your end users should access this DataPage through Authentication or Connection.
  2. In Select Fields screen, ensure the field with the Date/Time data type is selected.
  3. In Configure Fields screen, you will add several Virtual fields that will serve as input fields for each date part.
  4. Click Insert button and add a Virtual field. This first Virtual field will be used to collect the Day, Month and Year portion.Separate_input_fields_for_date_time_parts_1
  5. Under General Options, change the label field to Date. Under the Field Options section, check Calendar popup. Now when a user uses the calendar popup tool, the first three date parts will be available in the correct format (including slashes).
    Separate_input_fields_for_date_time_parts_2
  6. Next, add three more Virtual fields, one each for hours, minutes, and seconds. Under 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.Separate_input_fields_for_date_time_parts_3
    In Advanced tab, under the External Associations and Defaults section, by checking On Load, 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.Separate_input_fields_for_date_time_parts_4
    In each of these three fields (hour, minute and second), it is a good idea to check Continue next element on same line. This checkbox is located in the Advanced tab.
    Separate_input_fields_for_date_time_parts_5
  7. 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.
  8. You also need to add one more Virtual field to handle AM and PM. Add a fourth Virtual field, and change the Form element to 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.
    Separate_input_fields_for_date_time_parts_6

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

Separate_input_fields_for_date_time_parts_7

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.

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

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