Date Picker : How to set Min Year/Max Year

Wappler General How To
#1

I have been using the Date Picker to great effect but I want to restrict the years available to say, 2015 through to 2022 and therefore not have, for example, 2004 available.

image

I understand that the way to do this would be to select Show Dropdowns and use the Min Year and Max Year fields, but I can’t get it to work. I have tried with dates such as 2015 and 2022, I have also tried -3 and 3 but nothing works. What is the correct thing to put into these fields?

image

Is there also a way to do it dynamically, for instance, 3 years before and 3 years after today’s date?

#2

Try to find that static years, like „2016“ and just put data binding there. Maybe you must create on another place that data binding so you can see it first and cut & paste it over the static year

#3

@Freddy_Blockchain it won’t allow any other characters than numbers. So it won’t allow " ’ " or {{}}.

#4

@UKRiggers I meant in code not app connect

#5

@Freddy_Blockchain Can’t get anything like that to work.

Any ideas @George or @Teodor?

#6

@George or @Teodor, any help on this topic would be appreciated. Cheers.

#7

In DOM Window I‘m sure you can change it. If not change it in source code.

#8

You can add min and max year as dynamic attributes so that you can use expressions on them.

Then just add a datetime control on your page to get the current date.

Lastly use the value of this control formatted with date add -3 years for min and for max the other expression with +3 years

That is just out of my head :slight_smile: - if you don’t get it all will add screenshots later

#9

Thanks @Freddy_Blockchain but not sure we are talking about the same thing.

Hi @George, I have a Date and Time component as follows.

image

Then I have a Date Picker with the following settings

image
image.png356×643 12.9 KB

But the drop-down year selector still shows years going back to 1919. I want the option to be restricted to, say, 5 years going forward and 2 years going back.

image

So I think some help is needed :smile:

#10

@UKRiggers Min and Max years fields in the UI expect a static value.
You need to use the dynamic attributes and assign the dynamic expression there.

Whenever you need to use a dynamic expression you need to assign it via a dynamic attribute to the component.

#11

image

1 Like
#12

Thanks @Teodor with your clarification.

@George still not working.
I have this Date and Time component as mentioned before.

image

I have followed George’s suggestion as follows

image

The Values are
DateAndTimeInDays.datetime.addYears(-2)
DateAndTimeInDays.datetime.addYears(4)
(typed here because they don’t show in full on the screenshots)

And the “Value” dd_user.data.date_modified is from the database.

#13

So is it still not limiting the dates? Or is it limiting them wrongly?

#14

Still no limitation.

#15

I’m going to check this in the morning :slight_smile:

1 Like
#16

@Teodor did you manage to check this today?

#17

Hello @UKRiggers,
Yes i have checked that and we found the problem. There was a small typo in the code, which will be fixed in the upcoming Wappler update.

#18

Brilliant @Teodor as always. Cheers

#19

This has been fixed in Wappler 1.7.4
Please check the following tutorial: Min/Max Years Relative to Current Year