Discuss

Min/Max Years Relative to the Current Year

On this page

You can set Min and Max years for your datepicker as static values, but you can also use dynamic value relative to current year.

In our example we will set the Min year to be 5 years before current year, and Max year: 5 years after the current year. By default the datepicker shows 100 years before and 100 years after the current year:

Screenshot_14|503x469

Note that you need to have the Show Dropdowns option enabled to see the month and year dropdowns:

Screenshot_14|690x404

The first step is to select App and then add new component:

Screenshot_15|690x404

Open the Data category and select Date and Time:

Screenshot_16|690x404

Select the datepicker:

Screenshot_17|690x404

Scroll down to the dynamic attributes and add one:

Screenshot_18|690x404

Open the Date Picker category and add Min Year:

Screenshot_19|690x404

Click the dynamic data picker icon:

Screenshot_20|690x404

Select the datetime component value and click the formatter icon:

Screenshot_21|690x404

Right click the value and open the Date and Time category. Select Add Years:

Screenshot_22|690x404

For a value 5 years before current year enter -5

Screenshot_24|690x404

Now we need to format the date, so it only returns the year. Right click the Add Years option:

Screenshot_25|690x404

Open the Date And Time category and select Format Date:

Screenshot_26|690x404

Enter yyyy in the formatting field, this will return the date as an year like 2023. Click the select button:

Screenshot_27|690x404

And click Select to apply the formatting options:

Screenshot_28|690x404

Do the same for the Max Year dynamic attribute, just enter a positive number 5 for 5 years after current year:

Screenshot_30|690x404

Now you can see the dropdown showing 5 years before and 5 years after the current year:

Screenshot_31|500x416