Discuss

Using the Date Range Picker with Insert and Update Record

On this page

You can use the Date Range Picker component with insert or update record forms, and store the start and end dates of the selected range in separate database field.


We added a date range picker in a form on our page. This will be a server connect form, which will be used to insert data into a database table:

Screenshot_1|690x420

As we usually do, we start with creating the server action. Open the Server Connect panel and create a new server action:

Screenshot_2|690x420

Then select Globals:

Screenshot_3|690x420

Browse to the page containing the date range picker and select the form:

Screenshot_4|690x420

Then import the form inputs:

Screenshot_5|690x420

You will see the data range picker input, imported under the $_POST variables:

Screenshot_6|690x420

In most of the cases you want to store the dates in separate database fields, so this $_POST variable won't do the job. You need to create two new $_POST variables, which will be used to get the start and end date of the selected range and then you will be able to store them in separate database fields. Create a new $_POST variable:

Screenshot_7|690x420

Select Variable:

Screenshot_8|690x420

The start date of the range is returned by a variable, called the same as your input name is, but followed by the suffix _start. In our case this is date1_start:

Screenshot_9|690x420

The end date of the range is returned by a variable, called the same as your input name is, but followed by the suffix _end. In our case this is date1_end:

Screenshot_10|690x420

We are done setting up the required $_POST variables. Now, open your insert or update record step options:

Screenshot_11|690x420

For your start date database field, click the dynamic data picker button:

Screenshot_12|690x420

Select the $_POST variable, which returns the start date, i.e. the one with the _start suffix:

Screenshot_13|690x420

Do the same for the end date database field, selecting the $_POST variable having the _end suffix:

Screenshot_14|690x420

Click OK and you are done:

Screenshot_15|690x420

Save your server action, then setup your server action form as you usually do. Your start and end dates will now be saved in separate database fields.