Forum Academy Marketplace Showcase Pricing Features

Change a Date Pickers date on button click

I have a Date Picker in an edit form which shows initial date from a thing’s date-field, next to the date picker i have 3 buttons: “Today” “Tomorrow” “within 7 days”.

I want when the user clicks the button “tomorrow” for instance, the Date picker should show tomorrow’s date, etc.

Is it possible? how?

1 Like

Hi @cheskiefisch :slight_smile: You can do this using a custom state:

Preview: https://faye-demo-app.bubbleapps.io/version-test/buttons-with-datepicker
Editor: https://bubble.io/page?type=page&name=buttons-with-datepicker&id=faye-demo-app&tab=tabs-1

In this example, I created a custom state on the Datepicker called “Date” (type: Date, list: no)

Since the initial content of the Date Picker is from a Thing’s field, I placed the Datepicker in a group. Then added the conditional statement: “When Datepicker’sDate is not empty --> Initial Content: Datepicker’sDate”. This way, when the User decides to click one of the buttons, the state is set and the group is reset to show the custom state value, instead of the Thing’s date-field value:

Button Workflows:
“When Today is clicked” -->

“When Tomorrow is clicked” -->

“When 7 Days is clicked” -->

That should do it! :slight_smile:

3 Likes

Brilliant!

Thanks! Great solution
How can I apply it for hours?
I mean I want to have the minimum hour what is selected at Date/TimePicker A and maximum hour Date/TimePicket A minimum hour + 2 hours (but that 2 will get it dynamically from the database).
How to make it work for min and max hours please?

Thank you in advance!

No problem :slight_smile: To do this for hours in the minimum/maximum hour inputs, you could use “Date/Timepicker’svalue:extract hour”, because the hours inputs will accept numbers only, not a date. Then select “+ hours”. Here, you can either enter a number after “+ hours”, or use a dynamic expression in the place of the 2 below, as long as it’s referencing a single number field.

1 Like

Thank you!

So I did this

When I click on date A , I still have the previous day available which is not okay.
When I click on hour B it will show a range from hour A + 3 hours (as it is set for that listing). But if I change the minimum hour from A to something else, on B will not be updated. E.g. A: 12:00, on B: 15:00 maximum hour at a 15 minute time interval. But if I change A: 15:00 B will still have the range from 12:00 to 15:00 instead of 15:00 to 18:00.
Should I make a workflow to reset input on B when A’s value is changed?

Okay so I realized that I should have used DateInput A’s value instead of Date/TimePickeg A’s value.
Now I am facing some issues on the way that the hours respond:

  1. If the first hour(A) is not selected by user, the second (B) will have some strange default value set as A value’s would be 6am.
  2. If the A value is selected between sharp hours, e.g. 15 minutes, 30 minutes, 45 minutes, B value’s will not add those minutes. I thought that if I add 2 hours to A value, and A value’s is 14:15, then B value’s will be 16:15 not 16. Should I also add a condition for minutes?

L.E. solution for problem #1: when you click/tap on the calendar it will take that hour you clicked/tapped.

L.E. how can I make initial content to be today, without option to select earlier than today?
Solution: Like this: 59

So I have DateB to be DateA + (dynamic time chosen by the usr e.g.) 2hours.
How can I make that DateB will automatically change it’s placeholder and value based on what DateA has changed to?

@fayewatson thanks for this solution. However, it is not working for me fully.

It is working until user is allowed to change date picker date directly by clicking on the date picker itself. Once user does that then “initial content” is of no use, and hence when I click on “Next day” button, the custom state changes but it doesn’t affect date picker value.

Is there a solution to that?

I tried changing custom state value on date picker date change via the workflow, but it doesn’t seem to work, again probably because it is just affecting the “Initial content” and not actual value.