Discuss

Using Date Range Picker with Dynamic Values

On this page

With the Date Range Picker you can display date ranges, coming from a dynamic data source, such as a database query. This is useful for Detail Pages or Update Record pages, where you want to edit a reservation for example.


We created our page and added the Date Range Picker:

Screenshot_2|690x419

We also added a server connect component, which returns the start and end dates from a database:

Screenshot_3|690x419

Select the date range picker and scroll down to the dynamic attributes. Add new:

Screenshot_4|690x419

Open the Date Picker category and select Start Date. This is the start date of the range:

Screenshot_5|690x419

Click the dynamic data picker button, to select a dynamic value for the start date:

Screenshot_6|690x419

Select the start date binding, returned by your data source (database query) under the server connect component:

Screenshot_7|690x419

Now let's add the end date of the range. Add new dynamic attribute:

Screenshot_8|690x419

Open the Date Picker category and select End Date:

Screenshot_9|690x419

Click the dynamic data picker button, to select a dynamic value for the end date:

Screenshot_10|690x419

Select the end date binding, returned by your data source (database query) under the server connect component:

Screenshot_11|690x419

And you are done! The dynamic date range is now displayed in the Date Range Picker:

Screenshot_12|690x419